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 插件添加中英文自动补全的更多相关文章
- 给 zsh 自定义命令添加参数自动补全
有时我会自定义一些 zsh 命令,以便提升某些高频操作的效率.本文记录我给一个自定义命令添加参数自动补全的方法. 场景 我自定义了一个 zsh 命令 gmt,执行 gmt <b2>,可以将 ...
- IDEA添加yaml自动补全语法插件
问题:编写yml文件的时候,系统不能给自动补全 解决办法:File---->Settings---->Plugins---->搜索Spring Assistant x 项目效果预览
- 使用Redis实现中英文自动补全功能详解
1.Redis自动补全功能介绍: Redis可以帮我们实现很多种功能,今天这里着重介绍的是Redis的自动补全功能的实现.我们使用有序集合,并score都为0,这样就按元素值的字典序排序.然后我们 ...
- vim 添加php自动补全 并格式化代码
自动补全,修改/etc/vimrc的配置 vim /etc/vimrc 添加: filetype plugin on autocmd FileType php set omnifunc=phpcomp ...
- sublime3添加verilog自动补全代码段
前言 sublime默认的verilog自动补全十分垃圾,不过提供了代码段这个功能,你可以自己写个重用率高的代码段减轻工作量.写个模板当tb也很爽啦. 流程 1.打开user文件夹,创建verilog ...
- 在Jupyter Notebook添加代码自动补全功能
在使用Jupyter notebook时发现没有代码补全功能,于是在网上查找了一些资料,最后总结了以下内容. 1 安装显示目录功能: pip install jupyter_contrib_nbext ...
- 复利计算器(4)——jQuery界面美化、自动补全
一.分工 这次终于可以跟小伙伴合作了,经过讨论,我负责界面的美化和输入框自动补全,小伙伴擅长安卓,于是将复利计算器弄成app的任务就交给了小伙伴.为了我们两人团队,我们都好奋斗哈哈哈!! 二.界面美化 ...
- jquery+css实现邮箱自动补全
今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...
- Python2.7.12开发环境构建(自动补全)
一.安装readline-devel包 Python的编译安装依赖于这个包 yum -y install readline-devel 二.安装Python2.7.12 Python官方网站(到此处下 ...
随机推荐
- YQL获取天气
$(function () { $.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", { q: &quo ...
- 从 HTTP/1 到 HTTP/2,以及即将到来的 HTTP/3
如今的生活中已经离不开互联网,智能家居.在线支付.网上购物都需要互联网的支持.互联网切切实实地给生活带来了诸多便利.有了互联网,我们可以呆在空调房里,一边刷着微博,一边等透心凉的西瓜送到手上,安安静静 ...
- SpringMVC 图片上传虚拟目录
可以直接在tomcat的server.xml文件中进行设置,位置在Host中 添加内容为:<Context docBase="G:\JAVAtest\temp" path=& ...
- Python-基于向量机SVM的文本分类
项目代码见 Github: 1.算法介绍 2.代码所用数据 详情参见http://qwone.com/~jason/20Newsgroups/ 文件结构 ├─doc_classification.py ...
- Springboot2.x整合RabbitMQ
1.RabbitMQ介绍 可参照RabbitMQ笔记 2.接入配置 pom依赖 <!--amqp依赖--> <dependency> <groupId>org.sp ...
- P3515 [POI2011]Lightning Conductor
首先进行一步转化 $a_j \leq a_i + q - sqrt(abs(i - j))$ $a_i + q \geq a_j + sqrt(abs(i-j))$ 即 $q = max (a_j + ...
- .Net Core 商城微服务项目系列(五):使用Polly处理服务错误
项目进行微服务化之后,随之而来的问题就是服务调用过程中发生错误.超时等问题的时候我们该怎么处理,比如因为网络的瞬时问题导致服务超时,这在我本人所在公司的项目里是很常见的问题,当发生请求超时问题的时候, ...
- 踩坑踩坑之Flask+ uWSGI + Tensorflow的Web服务部署
一.简介 作为算法开发人员,在算法模块完成后,拟部署Web服务以对外提供服务,从而将算法模型落地应用.本文针对首次基于Flask + uWSGI + Tensorflow + Nginx部署Web服务 ...
- kotlin系列文章 --- 2.基本语法
函数 函数定义使用fun关键字,参数格式为:参数:类型,需要声明返回类型 fun sum(a:Int, b:Int): Int{ return a+b } 表达式作为函数体,返回值类型自动推断 fun ...
- Java 学习笔记之 Return停止线程
Return停止线程: 使用interrupt()和return结合也可以实现停止线程的效果.不过还是建议使用“抛异常“的方法,因为在catch块中可以将异常向上抛,使线程停止的事件得以传播. pub ...