jQuery，无需多作介绍，相信各位读者都应该接触或使用过了。jQuery UI，简而言之，它是一个基于jQuery的前端UI框架。我们可以使用jQuery + jQuery UI非常简单方便地制作出界面美观、功能强大、跨浏览器兼容的前端html界面。
今天，我们就来介绍jQuery UI中一个功能非常强大的部件Autocomplete。
Autocomplete，是一个功能强大的自动完成输入的jQuery插件，它也是jQuery UI的一部分。相信用过百度或者Google搜索的读者一定不会陌生，当我们在搜索框中开始输入搜索的关键字时，搜索引擎就会智能地帮我们联想并匹配我们所需的搜索关键字内容。
Google搜索输入框的自动完成功能
现在，我们使用jQuery UI的Autocomplete部件就可以非常简单方便地实现如上述图片中Google搜索框所具备的自动完成功能。
jQuery UI 的当前最新版本为1.10.4。由于不同版本之间的用法也有所差异，其他网站关于之前版本的Autocomplete用法介绍并不能完全适用于最新版本。因此，我们有必要了解一下jQuery UI Autocomplete的最新用法。
在使用Autocomplete实现自动完成功能之前，我们先来完成一些准备工作。比如，先编写包含如下代码的html文件：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery Autocomplete入门示例</title>
</head>
<body>
<label for="language">请输入指定的语言：</lable>
<input id="language" name="language" type="text">
</body>
</html>
对应的运行效果如下：
input.png
在完成上述准备工作之后，我们需要在html代码中引入jQuery UI的js文件和css文件，由于jQuery UI是依赖于jQuery的，因此我们还需要在引入jQuery UI之前引入jQuery。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery Autocomplete入门示例</title>
<!-- 引入jQuery UI的css文件 -->
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />
<!-- 引入jQuery的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<!-- 引入jQuery UI的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>
</head>
<body>
<label for="language">请输入指定的语言：</lable>
<input id="language" name="language" type="text">
</body>
</html>
现在，我们就来编写js代码让language输入框实现自动完成功能。要实现自动完成功能，我们需要如下调用jQuery UI扩展的autocomplete()方法：
$("#language").autocomplete(optionsObj);
这里的optionsObj是一个用于配置autocomplete相关参数选项的JavaScript对象。我们可以参考Autocomplete官方文档的相关说明来设置该对象。
Autocomplete有一个非常重要的属性参数source，它表示用于自动完成功能的数据集合。source属性的值可以是一个数组；也可以是一个字符串，用于表示一个远程请求的URL地址，通过处理该URL返回的数据从而获得autocomplete所需的数据；它还可以是一个回调函数，以便于完成一些复杂的数据处理。
现在，我们就使用最简单的方式，给source属性指定一个静态的数组，来初步实现自动完成功能。
$("#language").autocomplete({
source: [
"Chinese",
"English",
"Spanish",
"Russian",
"French",
"Japanese",
"Korean",
"German"
]
});
此时，使用浏览器访问该html页面就会发现，我们已经完成的最基本的自动完成功能了。运行代码
使用autocomplete实现基本的自动完成功能
不过，有些时候我们希望列表显示的文本和实际输入的值并不一致。此时，我们为source指定多个对象的数组，每个对象必须包含label和value属性，label表示显示的文本，value表示实际输入的值(当然它也可以包括其他属性，你可以自行进行相关操作)。
$("#language").autocomplete({
// 静态的数据源，根据label属性进行显示或模糊匹配，当给输入框设置value属性值
source: [
{ label: "Chinese", value: 1 },
{ label: "English", value: 2 },
{ label: "Spanish", value: 3 },
{ label: "Russian", value: 4 },
{ label: "French", value: 5 },
{ label: "Japanese", value: 6 },
]
});
// 最上面由多个字符串组成的数组，会被视为label和value值相同、均为该字符串的对象
更多的时候，我们希望该输入框显示的还是label属性值，但还要给另外的元素(例如隐藏文本域)设置value属性值，或者做一些其他处理。我们可以使用select事件来协助处理。
$("#language").autocomplete({
// 静态的数据源
source: [
{ label: "Chinese", value: 1, sayHi: "你好" },
{ label: "English", value: 2, sayHi: "Hello" },
{ label: "Spanish", value: 3, sayHi: "Hola" },
{ label: "Russian", value: 4, sayHi: "Привет" },
{ label: "French", value: 5, sayHi: "Bonjour" },
{ label: "Japanese", value: 6, sayHi: "こんにちは" },
],
select: function(event, ui){
// 这里的this指向当前输入框的DOM元素
// event参数是事件对象
// ui对象只有一个item属性，对应数据源中被选中的对象
$(this).val(ui.item.label);
$("#lang_id").val( ui.item.value );
$("#sayHi").html( ui.item.sayHi );
// 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
event.preventDefault();
}
});
运行代码
在实际应用上，我们的数据源并不是一成不变的。大多数情况下，我们的数据都保存在数据库中，此时，我们就需要使用autocomplete通过AJAX请求获取远程数据作为数据源。
$("#language").autocomplete({
source: "public.php"
});
对应的 ajax-actions.php 的服务器页面代码如下：
<?php
header('Content-Type:text/html;charset=UTF-8');
//为了方便举例，这里使用数组来模拟，你也可以在实际应用中从数据库中读取数据
//返回的数据最好是数组或对象类型的JSON格式字符串
$languages = array('Chinese', 'English', 'Spanish', 'Russian', 'French', 'Japanese', 'Korean', 'German');
echo json_encode($languages);
?>
此时，我们再次访问该页面，我们仍然可以看到自动完成的输入效果。
从远程服务器获取数据的自动完成功能
注意：细心的读者可能已经注意到了，不管是从js数组中获取数据，还是从后台服务器获取数据，我们的数据并没有发生变化；但是，我们在从后台获取数据的页面输入"c"时，显示了所有的数据项，而不是如之前一样只显示筛选过滤之后的"Chinese"和"French"。这是因为，当我们从远程请求获取数据时，Autocomplete认为服务器已经进行了过滤处理，返回的数据都是直接可用的，无需再过滤。
在发送AJAX请求时，Autocomplete会把当前输入框中的文字以默认参数名term的形式追加到我们设置的URL地址后面。当我们输入一个c时，Autocomplete实际发送的请求路径为/ajax-actions.php?term=c。
在上面的实例中，由于我们使用的是php数组来模拟服务器返回的数据，没有根据用户的输入来返回对应的数据，才会导致上述结果。如果在实际应用中，使用类似如下SQL语句来查询数据，则不会存在该问题。
<?php
// 注意：对于用户输入一般需要进行额外的安全处理
$term = $_GET['term'];
$sql = "select column1 as label, column2 as value, ... from table1 where column1 like '$term%'";
$languages = query($sql);
echo json_encode($languages);
?>
此外，有些时候我们需要根据用户的输入或其他操作来构造不同的请求URL，我们可以为source指定函数。Autocomplete将用户输入交给该函数，该函数可以进行任何处理，然后把通过任何方式获得的数据交给Autocomplete处理即可。
$("#language").autocomplete({
// 通过函数来获取并处理数据源
source: function(request, response){
// request对象只有一个term属性，对应用户输入的文本
// response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
// 自行处理并获取数据...
var dataObj = [...]; // 表示处理后的JSON数据
response(dataObj); // 最后将数据交给autocomplete去展示
}
});
运行代码
在上面的讲解中，我们介绍了autocomplete的必需参数选项source。除此之外，还有许多的参数选项可以给我们提供更加强大的其他辅助功能。请参考以下文章：
本文参考jQuery UI Autocomplete 官方文档编写，当前最新版本为 1.11。
概述
任何可以接收输入的元素均可以使用jQuery UI Autocomplete插件，例如：<input>、<textarea>文本域，以及带有contenteditable属性的元素。
键盘交互
当Autocomplete的自动完成菜单处于打开状态时，你可以使用以下键盘命令：
上(↑)： 移动焦点到菜单上一项。如果当前已经是第一项，则移动焦点到输入元素。如果当前已经是输入元素，则移动焦点到菜单最后一项。
下(↓): 移动焦点到菜单下一项。如果当前已经是最后一项，则移动焦点到输入元素。如果当前已经是输入元素，则移动焦点到菜单第一项。
ESC: 关闭菜单。
ENTER: 选择当前获得焦点的菜单项，并关闭菜单。
TAB: 选择当前获得焦点的菜单项，关闭菜单，并将焦点移动到下一个可获得焦点的元素。
PAGE UP/PAGE DOWN: 滚动一页菜单项(基于菜单高度)。通常来说，并不建议一次性显示需要用户翻页那么多的菜单项。
Autocomplete的配置选项
重要说明：Autocomplete 的所有配置选项，都支持在初始化时进行设置，例如：
// 给id为title的元素添加autocomplete功能，并以对象形式设置一或多个配置选项
$("#title").autocomplete( {
optionName1: "选项1",
optionName2: "选项2",
optionName3: "选项3"
} );
初始化之后，我们还可以通过以下方式来设置或获取配置选项，例如：
// 获取配置选项optionName的值
$("#title").autocomplete("option", "optionName");
// 设置配置选项optionName的值
$("#title").autocomplete("option", "optionName", "选项值");
appendTo
可选/String类型默认值为null。指定用于显示菜单的div应该追加到哪个元素内。当该值为null时，Autocomplete将会检查输入元素的祖辈中是否存在一个包含CSS类名ui-front的元素。如果存在，则追加到该元素内；如果不存在，则默认追加到body元素内。
$( "#title" ).autocomplete( { appendTo: "#menuWrapper" } );
autoFocus
可选/Boolean类型默认值为false。如果设为true，在菜单显示时，将默认选中第一项。
$( "#title" ).autocomplete( { autoFocus: true } );
delay
可选/Integer类型默认值为300。指定在按键发生后多少毫秒后才触发执行自动完成。
$( "#title" ).autocomplete( { delay: 500 } );
disabled
可选/Boolean类型默认值为false。是否禁用自动完成功能。
minLength
可选/Integer类型默认值为 1。指定触发自动完成的最小输入字符数，如果输入的字符小于该长度，将不会触发自动完成功能。将该值设为0，可以在不输入字符的情况下显示菜单(根据实测显示，可能需要通过上下方向键来触发)。
$( "#title" ).autocomplete({ minLength: 0 });
position
可选/Object类型默认值为{ my: "left top", at: "left bottom", collision: "none" }。指示在关联的输入元素的什么位置显示菜单。其默认值表示，菜单相对于关联目标元素的左下角，作为自己的左上角。该参数用法很多，详情请参考jQuery UI position。
// 相对于输入元素的右下角，作为菜单的右上角
$( "#title" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
source
Array/String/Function类型指定显示菜单的数据来源，必须指定该参数。
如果该参数为数组，则它可以是以下两种形式：
// 形式一
[ "选项1", "选项2", "选项3" ]
// 形式二(必须是label和value属性，label用于显示，value用于实际输入)
[
{ label: "选项1", value: "值1" },
{ label: "选项2", value: "值2" },
{ label: "选项3", value: "值3" }
]
/* 形式一相当于是形式二中对象的label和value属性都相同的情况 */
Autocomplete将根据用户的输入，自动模糊匹配数组的字符串或对象的label属性，并显示符合条件的菜单。
如果该参数是字符串，则将其视作一个远程请求的URL。Autocomplete将向目标URL发送Ajax请求，并将用户的输入以参数term追加到URL上，该URL应该返回JSON格式的字符串，并且可以转换为如上两种形式的数组。Autocomplete认为远程请求已经完成了数据过滤，它将不再进行模糊匹配，而是直接将返回的所有数据项显示出来。
如果该参数是函数，Autocomplete会为其提供两个参数：前者是一个仅有term属性的对象，该属性表示用户的输入；后者是一个响应函数。你可以根据用户的输入，自行获取数据，并进行任何处理，最后调用响应函数(第二个参数)，将数组数据交给Autocomplete去显示菜单。
$("#title").autocomplete( {
source: function(request, response){
// request.term 是用户输入的字符串
// 你可以在这里自行获取数据、自行处理
var dataArray = [,,,]; // 表示处理后的数组数据
// 将数组数据交给Autocomplete显示为菜单
// 如果情况特殊，你也可以不调用，从而不显示菜单
response( dataArray );
}
} );
7 0
我们认为：用户的主要目的，是为了获取有用的信息，而不是来点击
广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：
只有给用户带来价值，用户才会给我们以回报。 jQuery UI Autocomplete 事件API 有大用 中文手册 2014年09月21日
jQuery UI Autocomplete支持事件处理，我们可以通过为事件绑定处理函数，从而监听并处理对应的事件。
Autocomplete的事件均可以在初始化的时候，以配置选项的形式设置，例如：
$( "#title" ).autocomplete({
change: function( event, ui ) { /* 这里是函数内的代码 */ }
});
你也可以通过jQuery的事件绑定方法，为Autocomplete的指定事件添加处理函数。这使得Autocomplete的事件可以像常见的click、mouseover事件一样，通过jQuery的事件方法进行处理。例如：
// autocompletechange 就是autocomplete插件的change事件
// autocomplete的事件全名均为 "autocomplete"+"具体事件名"
$( "#title" ).on("autocompletechange", function( event, ui ) {
/* 这里是函数内的代码 */
} );
Autocomplete的事件列表
change 事件
当输入框失去焦点时，如果其输入内容发生改变，则触发该事件。其事件全名为autocompletechange。
$( "#title" ).autocomplete({
change: function( event, ui ) {
// event 是当前事件对象
// ui对象仅有一个item属性，它表示当前选择的菜单项对应的数据源对象
// 该对象具有label和value属性，以及其它自定义(如果有的话)的属性
// 如果当前没有选择的菜单项，这item属性为null
}
});
close 事件
当菜单被隐藏(关闭)时触发该事件。其事件全名为autocompleteclose。并不是每一个change事件都伴随着一个close事件。
$( "#title" ).autocomplete({
close: function( event, ui ) {
// event 是当前事件对象
// ui对象是空的，只是为了和其他事件的参数签名保持一致
}
});
create 事件
当Autocomplete被创建时触发该事件。其事件全名为autocompletecreate。
$( "#title" ).autocomplete({
create: function( event, ui ) {
// event 是当前事件对象
// ui对象是空的，只是为了和其他事件的参数签名保持一致
}
});
focus 事件
当任一菜单项获得焦点时触发该事件，该事件只会在通过键盘交互方式使菜单项获得焦点时触发。其事件全名为autocompletefocus。其默认行为是将输入框的文本内容更改为当前选中项的value属性值。
取消该事件的默认行为( event.preventDefault() )，可以阻止输入框的值被更改，但不会阻止菜单项获得焦点。
$( "#title" ).autocomplete({
focus: function( event, ui ) {
// event 是当前事件对象
// ui对象仅有一个item属性，它表示当前获取焦点的菜单项对应的数据源对象
// 该对象具有label和value属性，以及其它自定义(如果有的话)的属性
}
});
open 事件
当菜单显示(打开)或被更新时触发该事件。其事件全名为autocompleteopen。
$( "#title" ).autocomplete({
open: function( event, ui ) {
// event 是当前事件对象
// ui对象是空的，只是为了和其他事件的参数签名保持一致
}
});
response 事件
当自动完成的搜索完成，但尚未显示菜单时触发该事件。其事件全名为autocompleteresponse。你可以通过该事件来更改数据，从而修改显示的菜单内容。
$( "#title" ).autocomplete({
response: function( event, ui ) {
// event 是当前事件对象
// ui对象仅有一个content属性，它表示当前用于显示菜单的数组数据
// 每个元素都是具有label和value属性的对象
// 你可以对属性进行更改，从而改变显示的菜单内容
}
});
search 事件
当一次自动完成的搜索被执行前触发该事件。其事件全名为autocompletesearch。如果被取消，则不会开始一个请求，并且不会显示菜单项。
$( "#title" ).autocomplete({
search: function( event, ui ) {
// event 是当前事件对象
// ui对象是空的，只是为了和其他事件的参数签名保持一致
}
});
select 事件
当任一菜单项被选择时触发该事件。其事件全名为autocompleteselect。其默认行为是将输入框的文本内容更改为当前选中项的value属性值。
取消该事件的默认行为( event.preventDefault() )，可以阻止输入框的值被更改，但不会阻止菜单被关闭。
$( "#title" ).autocomplete({
select: function( event, ui ) {
// event 是当前事件对象
// ui对象仅有一个item属性，它表示当前被选中的菜单项对应的数据源对象
// 该对象具有label和value属性，以及其它自定义(如果有的话)的属性
}
});
13 0
我们认为：用户的主要目的，是为了获取有用的信息，而不是来点击
广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：
只有给用户带来价值，用户才会给我们以回报。 来自
http://www.365mini.com/page/jquery-ui-autocomplete-events.htmjQuery UI Autocomplete 方法API 有大用 中文手册 2014年09月21日
重要说明：与配置选项类似，Autocomplete插件的方法也不是直接调用，而且通过autocomplete()方法进行间接调用。例如：
$("#title").autocomplete( "方法名", "参数1", "参数2" );
Autocomplete的方法列表
close()
关闭自动完成显示的菜单。
$( "#title" ).autocomplete( "close" );
destroy()
完全移除自动完成功能。
$( "#title" ).autocomplete( "destroy" );
disable()
禁用Autocomplete。
$( "#title" ).autocomplete( "disable" );
enable()
启用Autocomplete。
$( "#title" ).autocomplete( "enable" );
instance()
返回Autocomplete的对象实例。如果指定元素没有关联的实例，则返回undefined。
$( "#title" ).autocomplete( "instance" );
option( [ optionName [, value ] ] )
设置或返回Autocomplete的配置选项。该方法有以下4种形式：
// 形式一：以对象形式返回所有配置选项。
var options = $( "#title" ).autocomplete( "option" );
// 形式二：根据选项名称获取单个配置选项
var isDisabled= $( "#title" ).autocomplete( "option", "disabled" );
// 形式三：设置指定配置选项的值
$( "#title" ).autocomplete( "option", "disabled", true );
// 形式四：以对象形式同时设置一个或多个配置选项的值
$( "#title" ).autocomplete( "option", { "disabled": true, "delay": 500 } );
search( [ value ] )
触发search事件，如果该事件未被取消的话，Autocomplete将调用数据源来显示菜单。如果没有为其指定value参数，它将当前输入元素的值(指定了的话，就使用指定的value值)。
$( "#title" ).autocomplete( "search", "Chin" );
widget()
返回匹配菜单元素的jQuery对象(实际匹配一个div元素，该div内用于放置显示菜单的html内容)。尽管菜单项是即时创建和销毁的，但菜单元素本身并不会重复创建和销毁。它在初始化时被创建，然后一直被重复使用。
$( "#title" ).autocomplete( "widget" );
7 0
我们认为：用户的主要目的，是为了获取有用的信息，而不是来点击
广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：
只有给用户带来价值，用户才会给我们以回报。 来自
http://www.365mini.com/page/jquery-ui-autocomplete-methods.htm使用jQuery Autocomplete(自动完成)插件
jQuery 的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de 的比较强大，我们就来写一些代码感受一下。
最简单的Autocomplete（自动完成）代码片段
1
2
3
4
5
6
7
8
9
| <script type="text/javascript">
var websites = [
"Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {
$("#website").autocomplete(websites);
});
</script>
|
1
2
3
4
5
6
| <p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
<div id="content"></div>
|
我们可以看到效果
这么几行代码就完成了自动完成功能，真实太强了，不过bassistance.de的jQuery Autocomplete插件还有更丰富的功能，它的文档在http://docs.jquery.com/Plugins/Autocomplete ，在API Documentation里，我们要仔细的研究一下autocomplete( url or data, [options] )方法。
autocomplete方法有两个参数，第一个用来填写URL地址或是数据，jQuery Autocomplete插件是支持Ajax方式调用数据，所以可以填写调用的地址，另外可以直接填写数据，格式为JavaScript数组，如我们的例子，autocomplete的另外一个参数 [options]是一个可选项，我们在例子中就没有写，但这个参数里面却有很多可配置的参数，我们还是先修改上面的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| $().ready(function() {
$("#website").autocomplete(websites,{
minChars: 0,
max: 5,
autoFill: true,
mustMatch: true,
matchContains: true,
scrollHeight: 220,
formatItem: function(data, i, total) {
return "<I>"+data[0]+"</I>";
},
formatMatch: function(data, i, total) {
return data[0];
},
formatResult: function(data) {
return data[0];
}
});
});
|
在options项我们增加了好几个参数
minChars表示在自动完成激活之前填入的最小字符，这里我们设置为0，在我们双击文本框，不输入字符的时候，就会把数据显示出来，效果如下
max表示列表里的条目数，我们设置了5，所以显示5条，也如上图
autoFill表示自动填充，就是在文本框中自动填充符合条件的项目，看下图，在我们输入“g”的时候，文本框里填充了“google”
mustMatch表示必须匹配条目，也就是在文本框里输入的内容，必须是data参数里的数据，如果不匹配，文本框就被清空
matchContains表示包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示，比如在上面的图中，我们输入了“g”，由于“Sogou”中也包含一个“g”，所以会显示出来，如果将matchContains设为fasle，则“Sogou”就不会显示
scrollHeight不用多解释，看文档就知道。
后面3个参数formatItem、formatMatch、formatResult非常有用，formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体，formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。
[options]里还有很多有用的参数，大家可以看它的文档。
jQuery Autocomplete插件里还有两个重要的方法，一个是result( handler )，一个是search( )，比如用户在选定了某个条目时需要触发一些别的方法时，着两个方法就可以起作用了，我们再修改以上的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| $().ready(function() {
function findValueCallback(event, data, formatted) {
$("#content").html("<strong>"+(!data ? "No match!" : "Selected: " + formatted)+"</strong>");
}
$("#website").autocomplete(websites,{
minChars: 0,
max: 5,
autoFill: true,
mustMatch: true,
matchContains: true,
scrollHeight: 220,
formatItem: function(data, i, total) {
return "<I>"+data[0]+"</I>";
},
formatMatch: function(data, i, total) {
return data[0];
},
formatResult: function(data) {
return data[0];
}
});
$("#website").result(findValueCallback);
$("#getvalue").click(function() {$("#website").search()});
});
|
看看是什么效果，会在content div的地方显示出我们选择的内容。
jQuery Autocomplete插件所带的例子还是很好的，大家可以仔细研究一下它的例子，更加灵活的运用jQuery Autocomplete插件。
PS:附加一点界面上的模糊搜索功能：
// 模糊搜索
$("#blurQueryCond_value").keyup(function() {
$("#cacheInstanceList_body tr").hide();
var $d = $("#cacheInstanceList_body tr").filter(":contains('" + $.trim($("#blurQueryCond_value").val()) + "')");
$d.show();
}
);
来自 http://lgscofield.iteye.com/blog/1680151
项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择， autocomplete插件就是完成这样的功能。
autocomplete官网 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下载jQuery autocomplete插件）。
淘宝商品搜索功能 效果：
下面来使用 autocomplete插件来实现类似效果。
1. 创建 AjaxPage.aspx 页面，在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目。 后台代码如下：
1 using System.Collections.Generic;
2 using System.IO;
3 using System.Runtime.Serialization.Json;
4 using System.Web.Services;
5
6 public partial class AjaxPage : System.Web.UI.Page
7 {
8 [WebMethod]
9 public static string GetAllHints()
10 {
11 Dictionary<string, string> data = new Dictionary<string, string>();
12 data.Add("苹果4代iphone正品", "21782");
13 data.Add("苹果4代 手机套", "238061");
14 data.Add("苹果4", "838360");
15 data.Add("苹果皮", "242721");
16 data.Add("苹果笔记本", "63348");
17 data.Add("苹果4s", "24030");
18 data.Add("戴尔笔记本", "110105");
19 data.Add("戴尔手机", "18870");
20 data.Add("戴尔键盘", "30367");
21
22 DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());
23
24 using (MemoryStream ms = new MemoryStream())
25 {
26 serializer.WriteObject(ms, data);
27 return System.Text.Encoding.UTF8.GetString(ms.ToArray());
28 }
29 }
30 }
注：该方法返回的数据格式为json字符串。
2. 创建搜索页面 Index.aspx， 前台代码如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <link rel="Stylesheet" href="Styles/jquery.autocomplete.css" />
9 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
10 <script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
11 <script type="text/javascript">
12 var v = 1;
13 $(document).ready(function () {
14 $.ajax({
15 type: "POST",
16 contentType: "application/json",
17 url: "AjaxPage.aspx/GetAllHints",
18 data: "{}",
19 dataType: "json",
20 success: function (msg) {
21 var datas = eval('(' + msg.d + ')');
22 $("#txtIput").autocomplete(datas, {
23 formatItem: function (row, i, max) {
24 return "<table width='400px'><tr><td align='left'>" + row.Key + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + row.Value + "个宝贝</font> </td></tr></table>";
25 },
26 formatMatch: function(row, i, max){
27 return row.Key;
28 }
29 });
30 }
31 });
32 });
33 </script>
34 </head>
35 <body>
36 <form id="form1" runat="server">
37 <div>
38 <center>
39 <asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox>
40 </center>
41 </div>
42 </form>
43 </body>
44 </html>
实现效果如下：
3. autocomplete 参数说明
* minChars (Number)
在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
* width (Number)
指定下拉框的宽度. Default: input元素的宽度
* max (Number)
autoComplete下拉显示项目的个数.Default: 10
* delay (Number)
击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
* autoFill (Boolean)
要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
* mustMatch (Booolean)
如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
* matchContains (Boolean)
决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
* selectFirst (Boolean)
如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
* cacheLength (Number)
缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
* matchSubset (Boolean)
autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
* matchCase (Boolean)
比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false
* multiple (Boolean)
是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
* multipleSeparator (String)
如果是多选时,用来分开各个选择的字符. Default: ","
* scroll (Boolean)
当结果集大于默认高度时是否使用卷轴显示 Default: true
* scrollHeight (Number)
自动完成提示的卷轴高度用像素大小表示 Default: 180
* formatItem (Function)
为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
* formatResult (Function)
和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
* formatMatch (Function)
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
* extraParams (Object)
为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}
* result (handler)
此事件会在用户选中某一项后触发，参数为：
event: 事件对象. event.type为result.
data: 选中的数据行.
formatted:formatResult函数返回的值
例如：
$("#singleBirdRemote").result(function(event, data, formatted) {
//如选择后给其他控件赋值，触发别的事件等等
});
怎么禁用已绑定的autocomplete事件