Fork me on GitHub

关于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 

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

posted @ 2015-06-18 16:31  萝卜丝小童鞋  阅读(487)  评论(0编辑  收藏  举报