Plugin AutoCompleter od MooTools

Jedním ze slavných zásuvných modulů MooTools je zásuvný modul AutoCompleter od Haralda Kirschnera. AutoCompleter vezme zadaný výraz od uživatele a vyhledává shody - což je zjevná pomoc pro uživatele. Zde je návod, jak co nejlépe využít Haraldův skvělý plugin.

Zobrazit ukázku

XHTML

Single Search

<input type="text" name="search" id="search" /> <br /><br /><br /><br /> <h2>Multi-Search</h2> <textarea name="search2" id="search2" style="height:100px;"></textarea>

Vše, co musíme udělat, je poskytnout textarea nebo vstupní prvek - AutoCompleter se postará o zbytek.

CSS

#search,#search2			 { border:1px solid #ccc; padding:6px; width:400px; background:#fff; }
ul.autocompleter-choices 	 { position:absolute; width:339px; padding:0; list-style:none; z-index:50; background:#3b5998; border:1px solid #3b5998; top:0; }
ul.autocompleter-choices li { margin:0; list-style:none; padding:0px 10px; cursor:pointer; font-weight:normal; white-space:nowrap; color:#fff; font-size:11px; }
ul.autocompleter-choices li:hover { background:#eceff5; color:#3b5998; }
.search-working { background:url(/wp-content/themes/walshbook/images/indicator_blue_small.gif) 200px 7px no-repeat; }

Všechny prvky můžeme stylizovat, jak chceme.

JavaScript MooTools

window.addEvent('domready', function() {
	new Autocompleter.Request.JSON('search', 'get-terms.php', {
		'postVar': 'search',
		minLength: 3,
		maxChoices: 10,
		autoSubmit: false,
		cache: true,
		delay: 300,
		onRequest: function() {
			$('search').setStyles({
				'background-image':'url(indicator_blue_small.gif)',
				'background-position':'350px 7px',
				'background-repeat':'no-repeat'
			});
		},
		onComplete: function() {
			$('search').setStyle('background','');
		}
	});
	
	
	new Autocompleter.Request.JSON('search2', 'get-terms.php', {
		'postVar': 'search',
		minLength: 3,
		maxChoices: 10,
		autoSubmit: false,
		cache: true,
		multiple: true,
		delay: 300,
		onRequest: function() {
			$('search2').setStyles({
				'background-image':'url(indicator_blue_small.gif)',
				'background-position':'350px 7px',
				'background-repeat':'no-repeat'
			});
		},
		onComplete: function() {
			$('search2').setStyle('background','');
		}
	});
	
});

Rozhodli jsme se používat verzi JSON AutoCompleter (můžeme také použít „Místní“ a „Požadavek“). Harald's poskytl tolik možností pro AutoCompleter, že je zde nemohu všechny zmínit. Rozhodli jsme se ukázat ty nejvýraznější.

Vytvořili jsme dvě instance AutoCompleter.Request.JSON – jednu, která umožní pouze jednu hodnotu, a jednu, která umožní vyhledávání více termínů. Abychom přidali trochu stylu a sdělili uživateli, že AutoCompleter hledá podobné výrazy, na požádání přidáme obrázek na pozadí a po dokončení požadavku jej skryjeme.

PHP

//settings, vars
$min = 3;
$max = 50;
$choices = 10;
$search = (string) stripslashes(strip_tags($_POST['search']));
$result = array();

//quick validation
if(strlen($search) >= $min && strlen($search) >= $max)
{
	//connect to the database
	$link = mysql_connect('host','username','password') or die('cannot connect');
	mysql_select_db('dbname',$link) or die('cannot select db');
	
	//query the db to find matches
	$qresult = mysql_query("SELECT DISTINCT term FROM search_terms WHERE term LIKE '%".mysql_escape_string($search)."%' LIMIT $choices",$link);
	
	//create a result array based on db results
	while($row = mysql_fetch_assoc($qresult)) { $result[] = $row['term']; }
	//sleep(4); // delay if you want
	
	//push the JSON out
	header('Content-type: application/json');
	echo json_encode($result);
}

Po základním ověření se připojíme k databázi, vyhledáme podobné výrazy a vrátíme řetězec zakódovaný v JSON pro použití AutoCompleterem.

Zobrazit ukázku

Je to tak jednoduché! Pomocí trochy PHP, CSS a JavaScriptu MooTools se vaše vyhledávací pole mohou změnit z nudných a základních na zábavné a užitečné!