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

最新推荐文章于 2024-07-04 16:45:16 发布

代码如疯

最新推荐文章于 2024-07-04 16:45:16 发布

阅读量7.1k

点赞数 3

本文链接：https://blog.csdn.net/mdcmy/article/details/9272949

版权

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

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

先上图

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

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