这里提到select，其实不是select，而是用<li><input>标签去仿造一个select，以实现对已有“option”的快速检索功能。

以<input>标签代替select的选择框，以<li>标签代替option标签。每个li标签附onclick触发js带参数的选取事件，所带参数即为option的value.<li>内附带显示text用的input标签，和隐藏的text的拼音input标签。思路就是这些。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>qqqun.21.777.12</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">

/*拼音检索功能全部css*/

#divselect{	margin:0;

			position:relative;

			z-index:10000;

			background: #fff;

			text-aling:left;}

#divselect ul{margin:0; padding:0}

#divselect ul li{margin:0;

				 height:22px;

				 line-height:22px;

				 border-bottom:1px solid grey;

				 border-left:1px solid grey;

				 border-right:1px solid grey;

				 padding-left:5px;

				 display: none;

				 cursor: pointer;

				 width: 300px;}

#divselect ul li input{cursor: pointer;}

#divselect input{height:22px;

				 line-height:22px;

				 padding:0px;}

</style>

<script>

///拼音检索下拉列表的全部函数，开头必须引用jquery

function showSoSo(){//显示搜索栏

	$('#soso').show();

	document.getElementById('soso').focus();

	$('#xbutton').show();

}

function hideSoSo(){//隐藏搜索栏

	$('#soso').hide();

	$('#xbutton').hide();

	$('#selectUl > li').hide();

}

function inputValue(value,text){//选中option

	$('#formName').attr('value',value);

	$('#seetext').attr('value',text);

	$('#sosoName').attr('value',text);

	$('#soso').attr('value',text);

	hideSoSo();

}

function soIt(){//搜索option列表

	var so = $("#soso").val();

	if(so.length>0){

		var kehuhz = document.getElementsByName('hzIndexs');

		var kehupy = document.getElementsByName('pyIndexs');

		var lis = document.getElementById('selectUl').getElementsByTagName('li'); 

		for(var c=0;c<kehuhz.length;c++){

			if(kehuhz[c].value.indexOf(so)>-1||kehupy[c].value.indexOf(so)>-1){

				lis[c].style.display='block';

			}else{

				lis[c].style.display='none';

			}

		}

	}

}

</script>

</head>

<body>

<div id='divselect'>

	<input type="text" id='seetext' style="width: 300px;" readonly="readonly" onclick="showSoSo()"/>

	<input id='soso' type="text" style="width: 300px;margin-left:-306px;display: none;" onkeyup="soIt()"/>

	<input type="button" id='xbutton' value="x" class='button3' style="display: none;" onclick='hideSoSo()'>

	<ul id="selectUl">

			<li onclick="inputValue(1,'选项一')">

				<input name='hzIndexs' value='选项一' type="text" style="width:100%;border: 0px;" readonly="readonly"/>

				<input name='pyIndexs' value='xuanxiangyi' type="hidden" readonly="readonly"/>

			</li>

			<li onclick="inputValue(2,'选项二')">

				<input name='hzIndexs' value='选项二' type="text" style="width:100%;border: 0px;" readonly="readonly"/>

				<input name='pyIndexs' value='xuanxianger' type="hidden" readonly="readonly"/>

			</li>

			<li onclick="inputValue(3,'北京大学')">

				<input name='hzIndexs' value='北京大学' type="text" style="width:100%;border: 0px;" readonly="readonly"/>

				<input name='pyIndexs' value='beijingdaxue' type="hidden" readonly="readonly"/>

			</li>

			<li onclick="inputValue(4,'清华大学')">

				<input name='hzIndexs' value='清华大学' type="text" style="width:100%;border: 0px;" readonly="readonly"/>

				<input name='pyIndexs' value='qinghuadaxue' type="hidden" readonly="readonly"/>

			</li>

	</ul>

</div>

<!--实际提交表单时用的隐藏域  测试时可写成type=text显示以供测试-->

<input type="hidden" name='formName' id='formName' readonly="readonly"/>

</body>

</html>

至于拼音的生成肯定不是手打的，一般option列表都是后台传过来的list用jstl标签去迭代，后台可以用pinyin4j.jar包去生成拼音

jquery实现仿select列表的即时搜索及拼音搜索的更多相关文章

  1. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  2. jquery插件-自定义select

        由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦.最好的办法就是使用自定义样式仿select效果.这里写了一个 ...

  3. 仿百度壁纸客户端（五）——实现搜索动画GestureDetector手势识别，动态更新搜索关键字

    仿百度壁纸客户端(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Frag ...

  4. jQuery写省级联动列表，创造二维数组，以及如何存/调用二维数组中的数据

    jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写 ...

  5. 仿百度壁纸client（五）——实现搜索动画GestureDetector手势识别，动态更新搜索keyword

    仿百度壁纸client(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 百度壁纸系列 仿百度壁纸client(一)--主框架搭建,自己定义Tab + ViewPager ...

  6. 左右两个Select列表框交换数据的JS

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  7. select列表遍历和触发事件

    1.以下两种都是jquery获取select列表被选中的value.var strText=$("#select_id").find("option:selected&q ...

  8. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  9. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

随机推荐

  1. spring mvc 接受多对象的处置

    spring mvc 接受多对象的处理 spring mvc感觉非常好用,尤其是对接收对象參数的自己主动绑定非常简便,但对于同一时候传多个对象时有些困扰. 同一时候项目并没有直接使用spring的fo ...

  2. PySide——Python图形化界面

    PySide——Python图形化界面 PySide——Python图形化界面入门教程(四) PySide——Python图形化界面入门教程(四) ——创建自己的信号槽 ——Creating Your ...

  3. [51daifan]来吧，一起书写51daifan的成长史吧-让一部分人先安全起来

    对新创项目而言,是idea更重要,还是执行力更重要?在没有用户时,我们该如何冷启动?团队.人.技术.产品.推广和拜春哥,哪一个更重要?到底是什么决定了一个项目的生存或者毁灭? 来吧,一起书写51dai ...

  4. ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

    本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...

  5. W​i​n​D​B​G​调​试​技​巧

    参考链接:http://wenku.baidu.com/view/4e58744dcf84b9d528ea7a42.html

  6. hdu2159 Fate 二维背包

    #include <cstring> #include <string> #include <cstdio> #include <cmath> #inc ...

  7. Spark中的Scheduler

    Spark中的Scheduler scheduler分成两个类型.一个是TaskScheduler与事实上现,一个是DAGScheduler. TaskScheduler:主要负责各stage中传入的 ...

  8. windows下搭建node.js及npm的工作环境

    近期在研究数据可视化D3框架,决定在windows下搭建一个nodejs及npm的工作环境,在网上查了n篇文章,别管是编译源代码安装也好.还是使用node.msi格式安装包也好,总是有问题.终于,功夫 ...

  9. NET单元测试的艺术

    NET单元测试的艺术 开篇:上一篇我们学习基本的单元测试基础知识和入门实例.但是,如果我们要测试的方法依赖于一个外部资源,如文件系统.数据库.Web服务或者其他难以控制的东西,那又该如何编写测试呢?为 ...

  10. Mysql主键索引、唯一索引、普通索引、全文索引、组合索引的区别

    原文:Mysql主键索引.唯一索引.普通索引.全文索引.组合索引的区别 Mysql索引概念: 说说Mysql索引,看到一个很少比如:索引就好比一本书的目录,它会让你更快的找到内容,显然目录(索引)并不 ...