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
相关资源：jdk-8u281-windows-x64.exe
