digitarald - Web Craftsman Harald Kirschner - Internet Consultant & Contractor

Showcase “JSON Request”

The Action Happens Here

JavaScript & MooTools

document.addEvent('domready', function() {
 
	var inputWord = $('demo-word');
 
	// Our instance for the element with id "demo-word"
	new Autocompleter.Request.JSON(inputWord, 'script.php', {
		'indicatorClass': 'autocompleter-loading'
	});
 
 
	var inputWord2 = $('demo-words');
 
	// An element as indicator, shown during background request
	var indicator = inputWord2.getPrevious().getElement('.autocompleter-loading');
	indicator.setStyle('display', 'none');
 
	new Autocompleter.Request.JSON(inputWord2, 'script.php', {
		'indicator': indicator,
		'multiple': true,
		'selectFirst': true,
		'selectMode': false,
		'minLength': 2
	});
 
});

XHTML Markup

<form action="http://www.spanishdict.com/translate" method="get" id="form-demo">
	<fieldset>
 
		<legend>Spanish Dictionary:</legend>
		<label>
			<span>Single word:</span>
			<input type="text" name="word" class="text" id="demo-word" />
		</label>
 
		<label>
			<span>As Tags: <img src="../spinner.gif" class="autocompleter-loading" /></span>
			<textarea rows="100" cols="100" id="demo-words">playa, palma</textarea>
 
		</label>
 
	</fieldset>
 
</form>

PHP Script

<?php
 
// Processing a 6 MB dictionary file!
ini_set('memory_limit', '128M');
 
$found = array();
$limit = 10;
 
$value = $_POST['value'];
 
if (is_string($value) )
{
	$words = file_get_contents('../es.csv');
	preg_match_all('/^'. preg_quote($value) .'(.*)$/mi', $words, $match);
	$found = array_slice(array_values($match[0]), 0, $limit);
}
 
header('Content-type: application/json');
echo json_encode($found);
 
?>

CSS Stylesheet

#demo-word
{
	width:				390px;
}
#demo-words
{
	height:				50px;
}
 
img.autocompleter-loading
{
	vertical-align:		top;
}
 

This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.

Comments are currently not available.