jquery实现仿select列表的即时搜索及拼音搜索
这里提到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列表的即时搜索及拼音搜索的更多相关文章
- jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）
1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...
- jquery插件-自定义select
由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦.最好的办法就是使用自定义样式仿select效果.这里写了一个 ...
- 仿百度壁纸客户端（五）——实现搜索动画GestureDetector手势识别，动态更新搜索关键字
仿百度壁纸客户端(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Frag ...
- jQuery写省级联动列表，创造二维数组，以及如何存/调用二维数组中的数据
jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写 ...
- 仿百度壁纸client（五）——实现搜索动画GestureDetector手势识别，动态更新搜索keyword
仿百度壁纸client(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 百度壁纸系列 仿百度壁纸client(一)--主框架搭建,自己定义Tab + ViewPager ...
- 左右两个Select列表框交换数据的JS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- select列表遍历和触发事件
1.以下两种都是jquery获取select列表被选中的value.var strText=$("#select_id").find("option:selected&q ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- VC 获取指定文件夹路径的方法小结
VC获取指定文件夹路径 flyfish 2010-3-5 一 使用Shell函数 1 获取应用程序的安装路径 TCHAR buf[_MAX_PATH];SHGetSpecialFolderPath( ...
- Lucene.Net 2.3.1开发介绍 —— 二、分词（五）
原文:Lucene.Net 2.3.1开发介绍 -- 二.分词(五) 2.1.3 二元分词 上一节通过变换查询表达式满足了需求,但是在实际应用中,如果那样查询,会出现另外一个问题,因为,那样搜索,是只 ...
- error: /usr/include/stdio.h: Permission denied 的一种情况分析
error: /usr/include/stdio.h: Permission denied 的一种情况分析 代码: #include <stdio.h> int main(){ prin ...
- Java核心技术－高级特性（2）- SoftReference, WeakReference and PhantomReference
Java.lang.ref 是 Java 类库中比较特殊的一个包,它提供了与 Java 垃圾回收器密切相关的引用类.这些引用类对象可以指向其它对象,但它们不同于一般的引用,因为它们的存在并不防碍 Ja ...
- HDU 3549 Flow Problem(有向边网络流)
九野的博客,转载请注明出处 :http://blog.csdn.net/acmmmm/article/details/11221561 题意:T个测试数据 下面n,m表示n个点m条有向带权边 m条边 ...
- C++基础之---union联合体大小分析
#include <iostream> using namespace std; union un { int a[7]; double b; char c[10]; int d[3]; ...
- 它们的定义Adapterg在etView( )正在使用View.setTag()与不同的是不使用。
首先看使用Tag案件. @Override public View getView(int position, View view, ViewGroup group) { ViewHolder hol ...
- STM8S---IO复用配置(STVP方式)
1 说明 STM8S的IO复用用程序代码配置起来比較麻烦.通常是操作flash来操作option byte字节.配置寄存器更加麻烦,能够使用STM 标准外设驱动库来设置. 本文使用一种界面配置的方式来 ...
- 8月30号周五香港接单ING~~化妆品只加10元!!!!!!
8月30号周五香港接单ING~~化妆品只加10元!!!!!! 8月30号周五香港接单ING~~化妆品只加10元!!!!!!
- 无状态TCP的ip_conntrack
Linux的ip_conntrack实现得过于沉重和精细.而实际上有时候,根本不需要在conntrack中对TCP的状态进行跟踪,只把它当UDP好了,我们的需求就是让系统可以将一个数据包和一个五元组标 ...