首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。