digitarald - Web Craftsman Harald Kirschner - Internet Consultant & Contractor

Showcase “HTML Request”

The Action Happens Here

JavaScript & MooTools

document.addEvent('domready', function() {
 
	/**
	 * Simple example, backend returns a list of <li> elements,
	 * processed by Autocompleter.Request.HTML.
	 */
	var inputWord = $('demo-word');
 
	new Autocompleter.Request.HTML(inputWord, 'script.php', {
		'indicatorClass': 'autocompleter-loading' // class added to the input during request
	});
 
	/**
	 * Second input with extended list and custom inject
	 * choice function. This one gets the first element
	 * for the value and marks the searched string.
	 */
	var inputWord2 = $('demo-word2');
 
	// Our instance for the element with id "demo-word2"
	new Autocompleter.Request.HTML(inputWord2, 'script.php', {
		'indicatorClass': 'autocompleter-loading',
		'postData': {
			'extended': '1' // send additional POST data, check the PHP code
		},
		'injectChoice': function(choice) {
			// choice is one <li> element
			var text = choice.getFirst();
			// the first element in this <li> is the <span> with the text
			var value = text.innerHTML;
			// inputValue saves value of the element for later selection
			choice.inputValue = value;
			// overrides the html with the marked query value (wrapped in a <span>)
			text.set('html', this.markQueryValue(value));
			// add the mouse events to the <li> element
			this.addChoiceEvents(choice);
		}
	});
 
});

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>Single word (Extended list):</span>
			<input type="text" name="word2" class="text" id="demo-word2" />
		</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);
}
 
$extended = false;
 
if (isset($_POST['extended']) && $_POST['extended'])
{
	$extended = true;
}
 
foreach ($found as $word)
{
	if ($extended)
	{
		echo "<li><span>$word</span><a class=\"demo-info\" href=\"http://www.spanishdict.com/translate?word=$word\">[ Ref ]</a></li>";
	}
	else
	{
		echo "<li>$word</li>";
	}
}
 
 
?>

CSS Stylesheet

.demo-info
{
	position:			absolute;
	top:				0;
	right:				4px;
	padding:			1px 2px;
	font-size:			0.9em;
	color:				#888;
}
 
input.autocompleter-loading
{
	background-image:		url(../spinner.gif);
	background-repeat:		no-repeat;
	background-position:	right 50%;
}
 

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.