如何让jquery.Autocomplete支持提示？

jquery.autocomeplete是一款基于jQuery的插件，它可以让用户输入的时候，实时搜索自动完成，这种技术目前在很多的网站都有使用，让这项技术普及的，应该是Google的Suggest吧。

有时候我们常常需要在自动完成的内容中给用户一些提示，例如携程是这样的：

20100106-1

让我们再对比另一个网页的自动完成，界面是这样的：

20100106-2

对比之下，我们立即发现，加上了提示性的：“输入中文/拼音/英文或↑↓选择.”不仅让界面变得美观，还可以起到一个友好提示用户的作用。但jQuery.autoComplete没有提供这种功能，怎么办呢？没关系，javascript的开放性让我们可以自由去修改它的源代码吧，让我们也来DIY一回吧。

思路：通过Firebuy对jQuery.autoComplete自动完成的结果进行分析，发现它输入了一个div，然后在div中包含一个UL，而列表就是UL中的LI了。要完成这个功能，我们只需要在UL前加一些HTML代码即可。同时，我们还希望所有的程序都可以使用到这个功能，所以我们不能把功能写死在程序中，需要提供一个调用参数。

实现：

打开jquery.autoComplete的源代码，找到function init()函数（约570行），把element = $(“<div />”)改为element = $(“<div><div class=’ac_caption’>” + options.caption + “</div></div>”)
找到$.Autocompleter.defaults这段代码（约391行），在下面的参数中添加一个caption: “”，添加这行代码的原因，是因为我们要给外部留一个调用接口
在CSS添加一段CSS代码，.ac_result .ac_caption，至于代码怎么写，看你网页的UI了，示例：

.ac_results  .ac_caption
{
	border-bottom: dashed 1px #666;
	color: #666;
	margin: 8px 10px 3px 10px;
}

调用方法：

$("#yourElementID").autocomplete(clientData.airPort,
	{
		caption: "输入中文/全拼/简拼/英文，使用↑↓可以选择"
		//更多参数
	});

至此，我们就完成了在自动完成插件添加提示的功能，来看一下效果：

20100106-3

查看DEMO

下载：[download id="9"]

本文来自涂雅[http://iove.net/]，原文链接：http://iove.net/archives/1471.html，网站转载请注明来源于涂雅并保留原文链接，否则视为侵权。

嗯，或者你也可以收听我的微博，腾讯微博(主要用这个，其他的看我的个人介绍)

我写博客常常出现错别字，常常错得还很离谱，有时候我自己看了第二遍都骂我自个儿，但我又不习惯重复审查，纠结啊...各位看到啥错别字或者不明白的地方，请给我留言指出来，感谢感谢。

6个评论在 "如何让jquery.Autocomplete支持提示？"

kandee
2011-10-25 15:33 回复TA

如果要自动补全又要分页怎么弄？
就是说有比如说有一百条自动提示的数据
但每页只显示20条

涂雅
2011-10-25 19:20 回复TA
和普通的分布一样，改改就行了，一次取20条不就结了

wtq
2010-12-9 15:22 回复TA

你好，这个例子很出错，我在完成autocomplete时，采用autofill，我的代码如下：
formatItem: function (row, i, max) {
var obj = eval(“(” + row + “)”); //转换成js对象
return i + ‘/’ + max + ‘: ‘ + obj.text + ‘——-’ + obj.url;

},
formatMatch: function (row, i, max) {
var obj = eval(“(” + row + “)”); //转换成js对象
return obj.text + obj.url;
},
formatResult: function (row) {
var obj = eval(“(” + row + “)”); //转换成js对象
return obj.url;

}
我采用的是json格式的，后台代码：
string strResult = “{text:’Link A’, url:’/page1′}\n {text:’Link B’, url: ‘/page2′} \n {text:’Link c’, url: ‘/page3′}\n {text:’wtq’, url: ‘王天巧’}\n {text:’wts’, url: ‘王天生’}\n {text:’wtp’, url: ‘王天鹏’}\n {text:’wyl’, url: ‘王雅丽’}”;

context.Response.Write(strResult );
我想利用autofill这个属性，当我填写“wtq”时，在文本框中自动显示“王天巧”，而在实际上在文本框中就显示“wtqt:’wtq’, url: ‘王天巧’”不知你有何办法解决？现在这里谢谢你了。

aliy
2010-11-25 20:42 回复TA

谢谢分享。非常感谢。

pentium
2010-1-8 09:50 回复TA

暂时还不太懂。。

涂雅
2010-1-8 10:29 回复TA
呵呵，如果你有使用jquery.autocomplete你就懂了，一个自动完成的功能，用户在输入的时候，可以根据用户输入给出建议