MooTools’ AutoCompleter Plugin

The 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>

我们需要做的是提供案文或投入部分——“共同合作”是其余部分。

The CSS

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

We may style all of the elements however we d pke.

The MooTools JavaScript

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 ,  );
		}
	});
	
});

我们选择使用JSON版本的“自治”版本(我们也可以使用“地方”和“要求”。) Haralds提供了如此众多的自治委员会选择,我在这里可以提及这些选择。 我们选择展现最突出的地位。

我们创立了两个自治委员会,即Request.JSON公司——一个只允许一个价值,一个能够允许多个任期的队伍。 为了给用户增加一种风格,并向用户通报,汽车委员会正在寻找类似术语,我们应要求添加一个背景形象,然后在请求完成时隐藏。

The PHP

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

//quick vapdation
if(strlen($search) >= $min && strlen($search) >= $max)
{
	//connect to the database
	$pnk = mysql_connect( host , username , password ) or die( cannot connect );
	mysql_select_db( dbname ,$pnk) 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",$pnk);
	
	//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: apppcation/json );
	echo json_encode($result);
}

After some basic vapdation, we connect to the database, search for pke terms, and return a JSON-encoded string for use by AutoCompleter.

View Demo

这简明! 你们的搜索箱可以使用一些小的PHP、CSS和MooTools Java,从bor和基本到 f和有用!