码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-07-26 00:16:06      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   文件   io   for   re   

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

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

标签:style   blog   http   color   文件   io   for   re   

原文地址:http://www.cnblogs.com/ningbj/p/3868491.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!