下拉列表支持拼音简拼、全拼、汉字搜索。
下拉列表支持拼音简拼、全拼、汉字搜索。
项目需要做一个下拉列表能支持拼音简拼、全拼、汉字搜索,网上搜了好多效果都不是很好,无奈之下就自己写了一个插件,本人技术有限写的不好的地方大家多多拍砖,希望好的建议和代码共同分享。下载连接
先上图
实现原理:事实上这种下拉列表就是有一些div拼在一块来实现。
看图片大家都能明白每一种颜色就是一个div。原理有了下面就是如何去实现。
(1)如何用div+css拼成上图效果,动态生成替换原select。
(2)如何让下拉列表支持拼音搜索。
最后还需要引入两个js是用来处理拼音的。getpyszm.js和changtopy.js。当然不要忘了还用到了jquery。(推荐使用jquery-1.4.4.min.js)
如何使用(例如html select代码如下):
要引入的文件:
<!-- 下拉列表 -->
<link href="selectbox.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/TBPWeb/app/runlognew/js/getpyszm.js"></script>
<script type="text/javascript" src="/TBPWeb/app/runlognew/js/changtopy.js"></script>
<!--单选插件-->
<script type="text/javascript" src="/TBPWeb/app/runlognew/js/jquery.singleselect.js"></script>
<!--多选插件-->
<script type="text/javascript" src="/TBPWeb/app/runlognew/js/jquery.multiseselect.js"></script>
<select id="test"><option value="v1">测试1</option><option value="v2">测试2</option><option value="v3">测试3</option></select>
(1)通过$("#test").singleSelect({width:"88%"});就能实现下拉列表搜索的功能。还有其他的配置参数分别说下:
id:'', id可有可无。 可有可无
width:'90%', 下拉列表的宽。可有可无
valItem:'', 下拉列表项(一个所有下拉列表value的数据)。可有可无
txtItem:'', 下拉列表项(一个所有下拉列表text的数据)。可有可无
selectItem:'', 下拉列表选中项id 。可有可无
render:null, 下拉列表放到那。可有可无
changeFunction:null 选项改变时触发事件(写法:changeFunction:“testChange()”)
(2)通过 $("#test").getsingleSelectValue();得到下拉列表选中的值value。
(3)通过$("#test").getsingleSelectText();得到下拉列表选中的text。
(4)通过$("#test").getAllSingleSelectValue()得到下拉列表所有值value。
(5)通过$("#test").getAllSingleSelectText()得到下拉列表所有的值text。
(6)通过$("#test2").createSingleSelect({ //test2是生成的下拉列表要放的地方。
id:"test3", 下拉表明表id
width:"72%", 下拉列表width
valItem:iditems, 下拉列表value数组
txtItem:valitems, 下拉列表text数组
selectItem:czdwid 下拉列表选中项
});
(7)通过$("#test").changeSingleSelectContent({valItem:idItems,txtItem:valItems});动态改变下拉列的值。
(8)通过$("#test").singleSelectLoaddingOn();打开一个缓冲字样。
以上是主要的方法,其他的源码中都有注释,写法都类似。多选下拉列表跟单选下拉列表类似。
下拉列表支持拼音简拼、全拼、汉字搜索。相关推荐
- php获取中文拼音(含生僻字)支持首字母,全拼
此文为基础篇-优势在于速度更快,无依赖第三方库.如需更多功能可参考进阶篇 进阶篇 支持多音字,音标 php获取中文拼音(含生僻字,多音字,音标)支持首字母,全拼 /*** 中文转拼音 (utf8版,g ...
- php获取中文拼音(含生僻字,多音字,音标)支持首字母,全拼
前面文章有提到php获取中文拼音的解决方案,文章链接如下 该方法的优势在于速度够快,不依赖于任何第三方库.但不支持多音字以及音标的获取,现在将借助第三方库解决这个问题 上一篇地址 php获取中文拼音( ...
- boot spring 简拼_超牛逼的下拉字典框架,支持拼音简拼搜索,代码项、代码值搜索,无限层级级联,多选、过滤自定义数据表等等...
Dic扩展模块 Dic数据字典模块是v-ci的核心之一,为解决大数据量下拉字典效率及操作问题,特推出通用的数据字典模块,所有字典数据可在数据库维护,在大数据量时采用分页下拉的展示方式,同时支持拼音简拼 ...
- 不使用pinyin4j, 通过字符串截取手段快速查询通讯录联系人的拼音(包括全拼和简拼)
不使用pinyin4j, 通过字符串截取手段快速查询通讯录联系人的拼音(包括全拼和简拼) 刚开始我也是使用pinyin4j但是速度太慢8分钟还加载不完我的280个联系人数据,所以我选择另谋出路.发现有 ...
- Android通讯录模糊查询搜索(号码,姓名,首字母简拼,全拼),批量选取联系人
Android通讯录模糊查询搜索(号码,姓名,首字母简拼,全拼),批量选取联系人 公司最近的项目中遇到一个需求需要读取通讯录联系人,并需要支持对联系人的模糊查询及批量选取,网上找了好几个例子,模糊查询 ...
- Java汉字转拼音工具类(支持首字母和全拼)
工具类产生是因为个人业务需求需要根据中文汉字排序,而博主又对网上回答不满意,所以才根据相关资料写了该工具类,写入博客 以备不时之需.直接上代码: Java汉字转成汉语拼音工具类,需要用到pinyin4 ...
- sql文字转换全拼_SQL汉字转拼音函数-支持首字母、全拼
作者不详 --方法一sqlserver汉字转拼音首字母 --调用方法 select dbo.procGetPY ('中國') Create FUNCTION dbo.procGetPY ( @str ...
- mysql全拼_mysql数据库汉字首字母简拼全拼
汉字提取首字母 fristPinyin : 此函数是将一个中文字符串的第一个汉字转成拼音字母 (例如:"李"->l),包括特殊字符处理,可以进行动态添加 CREATE FUN ...
- Android通讯录模糊匹配搜索实现(号码 首字母 简拼 全拼)
Android通讯录模糊匹配搜索实现(号码.首字母.简拼.全拼) 2013年12月10日 工作记录 小巫在工作中碰到一个需求,要求实现通讯录联系人的搜索,获取联系人的方式有好几种,我都有点混乱了,下面 ...
- Android通讯录模糊匹配搜索实现 号码 首字母 简拼 全拼
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Andr ...
最新文章
- 推荐陈永真著作《高效率开关电源设计与制作》
- 剑指Offer(Java实现)栈的压入、弹出序列
- 我用C++复刻了这款上世纪最伟大的游戏
- Linux下C编程实战
- 【面经——《广州敏视数码科技有限公司》——图像处理算法工程师-深度学习方向】
- HTML 文档流和文本流的理解
- 微信开放平台 公众号第三方平台开发 教程五 代公众号发起网页授权源码
- 微信小程序黑客马拉松即将开始,来做最酷的 Mini Program Creators! 1
- alert弹框里弹一个表格_Python学习第十三弹 输入与输出
- 百度英伟达联手推混合精度训练,同样性能只需一半内存 | 附论文
- oracle exp空数据表,Oracle11g中Exp空表的问题
- Microsoft Expression blend 3 新功能简介
- 科普:史上最强单片机
- 图像增强--视网膜皮层Retinex算法(二)
- p6spy mysql8_druid数据源集成p6spy踩坑
- ‘dtools’不是内部或外部命令,也不是可运行的程序或批处理文件,个人解决方案
- WRP Ultimate 3D Endless Runner Kit - 狂徒末路跑酷角色替换教程
- 捡到的苹果手机怎么解id锁_苹果手机换id通讯录没了怎么恢复?超全教程,建议收藏!...
- Android 使用PLDroidPlayer播放网络视频 依据视频角度自己主动旋转
- 【异常检测】基于主成分分类器的异常检测方案(文献学习)