jquery实现仿select列表的即时搜索及拼音搜索

haierboos

浏览: 436842 次

最近访客更多访客>>

yhnd685

airs

paopao3

大熊很忙

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1012)

社区版块

存档分类

2013-09 ( 28)
2013-08 ( 112)
2013-07 ( 30)
更多存档...

这里提到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包去生成拼音

分享到：