Other versions:

AutoCompleter (v1.1)

Project AutoCompleter Showcase This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

Showcases:

Showcase “JSON Request”

The Action Happens Here

Spanish Dictionary:

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.

Share it: Stumble it!Digg This!del.icio.us (No Posts)

discussion by DISQUS No Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

Sort:
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last

Post your comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!


Internet Consultant & Contractor

I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

Developer Resources & Tools