关于JQuery的autocomplete1.11.4版本插件的使用心得

原文链接：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 

暂时我想到的在开发中遇到的问题就这些，后面如果记起了再更新