首页 > 代码库 > jquery mutilselect 插件添加中英文自动补全

jquery mutilselect 插件添加中英文自动补全

jquery mutilselect默认只能根据设置的option来进行自动提示

$.each(availableTags, function(key, value) {            $(‘#channels‘)             .append($("<option></option>")             .attr("value",value)             .text(value)); //默认按text中的value来自动提示    });    

阅读下面的需求:

有这么几个选项:

北京

天津

湖北

输入中文的时候控件可以根据输入的中文自动提示,如输入"北" 提示北京,但是如果想输入"bei"提示"北京".控件无法完成这个功能,这个时候需要修改源代码,在jquery.multiselect.filter.js文件中,有一个专门来做提示的函数updateCache,找到这个函数的定义

 updateCache: function() {      // each list item      this.rows = this.instance.menu.find(".ui-multiselect-checkboxes li:not(.ui-multiselect-optgroup-label)");      // cache      this.cache = this.element.children().map(function() {        var elem = $(this);        // account for optgroups        if(this.tagName.toLowerCase() === "optgroup") {          elem = elem.children();        }        return elem.map(function() {          return this.innerHTML.toLowerCase();        }).get();      }).get();    //下面这一段代码是自定义,添加拼音提示功能      if(this.cache.length>0){          for(var i=0;i< this.cache.length;i++){              var tv = this.cache[i];              var letter=tv+cityMap[tv];              if(letter!=undefined){                  this.cache[i]=tv+letter;              }          }      }    },

上面的代码就是新增后的代码。新增的代码也就几行。如下

//下面这一段代码是自定义,添加拼音提示功能      if(this.cache.length>0){          for(var i=0;i< this.cache.length;i++){              var tv = this.cache[i];              var letter=tv+cityMap[tv];              if(letter!=undefined){                  this.cache[i]=tv+letter;              }          }      }

 

 

解释这段代码:

  this.rows代表的是每一行可选的项目

  this.cache是一个数组,默认初始化所有option中text到这个数组,在用户输入字符之后,会遍历这个数组,通过正则表达式来匹配,匹配上的元素会自动在前端展示出来。

 

 

完整源代码下载:

链接: http://pan.baidu.com/s/1c0AdgI0 密码: 6lck