mootools_MooTools的AutoCompleter插件

mootools

One of the famous MooTools plugins is Harald Kirschner's AutoCompleter plugin. AutoCompleter takes a term input by the user and searches for matches -- an obviously help to the user. Here's how to make the most of Harald's great plugin.

Harald Kirschner的AutoCompleter插件是著名的MooTools插件之一。 AutoCompleter接受用户输入的术语并搜索匹配项-对用户来说显然是有帮助的。 这是充分利用Harald出色插件的方法。

View Demo 观看演示

XHTML (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>

All we need to do is provide the textarea or input element -- AutoCompleter does the rest.

我们需要做的就是提供textarea或输入元素-其余部分由AutoCompleter完成。

CSS (The 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; }

We may style all of the elements however we'd like.

我们可以根据需要设置所有元素的样式。

MooTools JavaScript (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','');
		}
	});
	
});

We've chosen to use the JSON version of AutoCompleter (we may also use "Local" and "Request"). Harald's provided so many options for AutoCompleter that I can't mention them all here. We've chosen to show the most prominent.

我们选择使用JSON版本的AutoCompleter(我们也可以使用“本地”和“请求”)。 Harald为AutoCompleter提供了很多选项，我在这里不能一一列举。 我们选择了展示最杰出的作品。

We've created two AutoCompleter.Request.JSON instances -- one that will allow only one value and one that will allow for multiple term lookups. To add a bit of style and communicate to the user that the AutoCompleter is looking for like terms, we add a background image upon request and then hide it when the request has been completed.

我们创建了两个AutoCompleter.Request.JSON实例-一个实例将仅允许一个值，而另一个实例将允许多个术语查找。 为了添加一些样式并向用户传达AutoCompleter正在寻找类似的字词，我们根据请求添加背景图片，然后在请求完成后将其隐藏。

PHP (The 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);
}

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

经过一些基本的验证之后，我们连接到数据库，搜索相似的术语，然后返回JSON编码的字符串供AutoCompleter使用。

View Demo 观看演示

It's that simple! Using some a little PHP, CSS, and MooTools JavaScript, your search boxes can go from boring and basic to fun and helpful!

就这么简单！ 使用一些PHP，CSS和MooTools JavaScript，您的搜索框可能会从无聊到基本到有趣而有用！

翻译自: https://davidwalsh.name/mootools-autocomplete

mootools