下拉列表支持拼音简拼、全拼、汉字搜索。

项目需要做一个下拉列表能支持拼音简拼、全拼、汉字搜索,网上搜了好多效果都不是很好,无奈之下就自己写了一个插件,本人技术有限写的不好的地方大家多多拍砖,希望好的建议和代码共同分享。下载连接

先上图

实现原理:事实上这种下拉列表就是有一些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();打开一个缓冲字样。

以上是主要的方法,其他的源码中都有注释,写法都类似。多选下拉列表跟单选下拉列表类似。

下拉列表支持拼音简拼、全拼、汉字搜索。相关推荐

  1. php获取中文拼音(含生僻字)支持首字母,全拼

    此文为基础篇-优势在于速度更快,无依赖第三方库.如需更多功能可参考进阶篇 进阶篇 支持多音字,音标 php获取中文拼音(含生僻字,多音字,音标)支持首字母,全拼 /*** 中文转拼音 (utf8版,g ...

  2. php获取中文拼音(含生僻字,多音字,音标)支持首字母,全拼

    前面文章有提到php获取中文拼音的解决方案,文章链接如下 该方法的优势在于速度够快,不依赖于任何第三方库.但不支持多音字以及音标的获取,现在将借助第三方库解决这个问题 上一篇地址 php获取中文拼音( ...

  3. boot spring 简拼_超牛逼的下拉字典框架,支持拼音简拼搜索,代码项、代码值搜索,无限层级级联,多选、过滤自定义数据表等等...

    Dic扩展模块 Dic数据字典模块是v-ci的核心之一,为解决大数据量下拉字典效率及操作问题,特推出通用的数据字典模块,所有字典数据可在数据库维护,在大数据量时采用分页下拉的展示方式,同时支持拼音简拼 ...

  4. 不使用pinyin4j, 通过字符串截取手段快速查询通讯录联系人的拼音(包括全拼和简拼)

    不使用pinyin4j, 通过字符串截取手段快速查询通讯录联系人的拼音(包括全拼和简拼) 刚开始我也是使用pinyin4j但是速度太慢8分钟还加载不完我的280个联系人数据,所以我选择另谋出路.发现有 ...

  5. Android通讯录模糊查询搜索(号码,姓名,首字母简拼,全拼),批量选取联系人

    Android通讯录模糊查询搜索(号码,姓名,首字母简拼,全拼),批量选取联系人 公司最近的项目中遇到一个需求需要读取通讯录联系人,并需要支持对联系人的模糊查询及批量选取,网上找了好几个例子,模糊查询 ...

  6. Java汉字转拼音工具类(支持首字母和全拼)

    工具类产生是因为个人业务需求需要根据中文汉字排序,而博主又对网上回答不满意,所以才根据相关资料写了该工具类,写入博客 以备不时之需.直接上代码: Java汉字转成汉语拼音工具类,需要用到pinyin4 ...

  7. sql文字转换全拼_SQL汉字转拼音函数-支持首字母、全拼

    作者不详 --方法一sqlserver汉字转拼音首字母 --调用方法 select dbo.procGetPY ('中國') Create FUNCTION dbo.procGetPY ( @str ...

  8. mysql全拼_mysql数据库汉字首字母简拼全拼

    汉字提取首字母 fristPinyin : 此函数是将一个中文字符串的第一个汉字转成拼音字母 (例如:"李"->l),包括特殊字符处理,可以进行动态添加 CREATE FUN ...

  9. Android通讯录模糊匹配搜索实现(号码 首字母 简拼 全拼)

    Android通讯录模糊匹配搜索实现(号码.首字母.简拼.全拼) 2013年12月10日 工作记录 小巫在工作中碰到一个需求,要求实现通讯录联系人的搜索,获取联系人的方式有好几种,我都有点混乱了,下面 ...

  10. Android通讯录模糊匹配搜索实现 号码 首字母 简拼 全拼

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Andr ...

最新文章

  1. 推荐陈永真著作《高效率开关电源设计与制作》
  2. 剑指Offer(Java实现)栈的压入、弹出序列
  3. 我用C++复刻了这款上世纪最伟大的游戏
  4. Linux下C编程实战
  5. 【面经——《广州敏视数码科技有限公司》——图像处理算法工程师-深度学习方向】
  6. HTML 文档流和文本流的理解
  7. 微信开放平台 公众号第三方平台开发 教程五 代公众号发起网页授权源码
  8. 微信小程序黑客马拉松即将开始,来做最酷的 Mini Program Creators! 1
  9. alert弹框里弹一个表格_Python学习第十三弹 输入与输出
  10. 百度英伟达联手推混合精度训练,同样性能只需一半内存 | 附论文
  11. oracle exp空数据表,Oracle11g中Exp空表的问题
  12. Microsoft Expression blend 3 新功能简介
  13. 科普:史上最强单片机
  14. 图像增强--视网膜皮层Retinex算法(二)
  15. p6spy mysql8_druid数据源集成p6spy踩坑
  16. ‘dtools’不是内部或外部命令,也不是可运行的程序或批处理文件,个人解决方案
  17. WRP Ultimate 3D Endless Runner Kit - 狂徒末路跑酷角色替换教程
  18. 捡到的苹果手机怎么解id锁_苹果手机换id通讯录没了怎么恢复?超全教程,建议收藏!...
  19. Android 使用PLDroidPlayer播放网络视频 依据视频角度自己主动旋转
  20. 【异常检测】基于主成分分类器的异常检测方案(文献学习)

热门文章

  1. python爬网易评论
  2. 计算机审计实训遇到的问题及解决方法,计算机审计实训总结报告.doc
  3. excel如何去重统计户数_Excel如何去重,然后统计数据?_excel提取数据并去重
  4. python excel表格去重_EXCEL数据如何去重? Python:这事我比你熟
  5. 如何查询SCI检索号?
  6. 人机交互课后习题——感知和认知基础
  7. ArcGIS影像多种裁剪方法
  8. 一串代码远程控制电脑关机
  9. 分手纪念网页-分手了就用这个看看吧(移动端)
  10. 开发者故事|朝九晚六大小周,我就是快乐的技术人