您的位置：首页 > Web前端 > JQuery

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

2013-08-30 16:47 369 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript 实例即时搜索 select

相关文章推荐

新的分享

章节导航