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

jquery mutilselect 插件添加中英文自动补全,布布扣,bubuko.com