jquery.autocomeplete是一款基于jQuery的插件,它可以让用户输入的时候,实时搜索自动完成,这种技术目前在很多的网站都有使用,让这项技术普及的,应该是Google的Suggest吧。
有时候我们常常需要在自动完成的内容中给用户一些提示,例如携程是这样的:
让我们再对比另一个网页的自动完成,界面是这样的:
对比之下,我们立即发现,加上了提示性的:“输入中文/拼音/英文或↑↓选择.”不仅让界面变得美观,还可以起到一个友好提示用户的作用。但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: "输入中文/全拼/简拼/英文,使用↑↓可以选择" //更多参数 });
至此,我们就完成了在自动完成插件添加提示的功能,来看一下效果: