吴伟贤のBlog

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

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

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

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

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

实现：

1. 打开jquery.autoComplete的源代码，找到function init()函数（约570行），把element = $(“<div />”)改为element = $(“<div><div class=’ac_caption’>” + options.caption + “</div></div>”)
2. 找到$.Autocompleter.defaults这段代码（约391行），在下面的参数中添加一个caption: “”，添加这行代码的原因，是因为我们要给外部留一个调用接口
3. 在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: "输入中文/全拼/简拼/英文，使用↑↓可以选择"
		//更多参数
	});

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

查看DEMO