原文链接：http://www.cnblogs.com/miss-radish/p/4586206.html
语言功底不好，像流水账一样的记录一下吧！
网上有很多关于autocomplete的api，我这里就不说这个了，主要记录一下我在项目中遇到的问题，和各种需求
一、如果是ajax出来或者页面加载完通过js创建的节点，我相信你们肯定有遇到插件失效的情况，那怎么解决呢？
a.使用jQuery的on()方法（live()也可以，不过此方法在1.9版本中已经被废弃了）
$("body").on("click","your selector",function(){
$(this).autocomplete();
});
这里也不一定非要是body对象，可以是你需要获取选择器的父级，但是这个父级必须是页面一渲染完就存在的，否则失效。
b.如果你对autocomplete进行了封装，这时候在回调函数或者使用js创建完之后再调用一次就可以了。
封装的autocomplete方法,eg:
function autocompleteSelf(selector){ //可能会传其他参数，例如数据源source等等 $(selector).autocomplete(); }
ajax成功之后调用一下此方法
$.ajax({ success: function(data){ autocompleteSelf(".input"); } })
二、按键盘上下键，input框内的数据格式和你鼠标点击的自定义格式不对应
这是因为此插件的focus事件填充默认的数据格式。
在按键盘上下键不需要填充选中值的时候可以这样设置
$("selector").autocomplete({
focus: function(event,ui){
//取消事件的默认动作
event.preventDefault();
}
})
三、自定义下拉数据
官网有个demo，能自定义下拉的数据格式：http://jqueryui.com/autocomplete/#custom-data
官网的demo只有一个input框，调用完全没问题，下拉的自定义数据格式各种顺畅。
可是在开发中，我们可能有两个input同时调用插件，这时候第一个input没有问题，而第二却....
点击第一个input框的时候，看到数据出来了，好开森
啊哦！第二个input框，各种不爽，各种抓狂，立马百度，谷歌一大堆
这是因为如果对象有多个，jQuery默认返回第一个对象，所以在你点击第二个input框的时候在_renderItemData方法中调用this._renderItem，而this并未指向第二个input框生成的下拉列表对象，所以就调用了插件中的_renderItem方法，然后再一看插件中_renderItem方法的return item.label，如果你的数据中没有label属性那么这个值肯定就undefined，所以列表就空空如也
//autocomplete插件部分代码
_renderMenu: function( ul, items ) { var that = this; $.each( items, function( index, item ) { that._renderItemData( ul, item ); }); }, _renderItemData: function( ul, item ) { return this._renderItem( ul, item ).data( "ui-autocomplete-item", item ); }, _renderItem: function( ul, item ) { return $( "<li>" ).text( item.label ).appendTo( ul ); },
所以你需要遍历插件绑定自定数据列表的方法
这是官网demo的代码
.autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }
我们给他改成这样
.each(function(){
$(this).autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; })
其他参考资料：http://stackoverflow.com/questions/7410962/jquery-autocomplete-for-2-input-field-same-class
四、点击input就显示数据列表
官网给的demo都是需要输入数据之后才显示下拉列表，客户说：我要一点击就能看到数据，就像select一样。
这时候查看api发现有个minLength的参数，
The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.（在执行搜索之前，用户必须输入的最小字符数。当本地数据很少的时候，0就是非常有用的，但是当搜索一个字符会匹配几千条数据的时候，这个参数就应该体现出它更高的价值）
嗯，然后就立马把自己的代码配置上这个参数
$(selector).autocomplete({ minLength: 0 })
保存，打开浏览器刷新页面，点击input。我靠！怎么没反应！哼哼，在仔细看看api，别人说“执行搜索之前，用户必须输入的最小字符数”，必须输入，你只是点击了并没有输入啊！！！额！！！
然后不难发现，设置成0的时候，你点击了没反应，然后你按一下键盘的上下键，或者删除键,或者其他什么键，额，出来了！
好！！那就简单了，既然我点击你不出来，非要我按一下键盘你才出来，那我在调用完插件之后再触发keydown事件，那不就可以了，说干就干
$(selector).autocomplete({ minLength: 0 }).click(function(){ $(this).trigger("keydown"); });
鼓掌！啪啪啪啪啪啪！！！！
原文链接：http://www.cnblogs.com/miss-radish/p/4586206.html
暂时我想到的在开发中遇到的问题就这些，后面如果记起了再更新