js实现带搜索功能的下拉框实时搜索实时匹配


Posted in Javascript onNovember 05, 2013

1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中。
2. 如何获取每次输入的内容,当keyup的时候触发函数。
问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 )
3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得)
4. 如何匹配?(解决)
4.1 如何获得所有option中的内容?(解决)

function getSelectText() 
{ 
//获得所有select标签 
var object = document.getElementsByTagName('select'); 
//因为该html中只有一个select标签,所以就是name = "aabb"代表的标签 
var obj = object[0]; 
//alert(obj.length); 
//alert(obj[0]); 
//保存所有option 的值 
var allText; 
for(i=0;i<obj.length;i++) 
{ 
allText += obj[i].innerText+','; //关键是通过option对象的innerText属性获取到选项文本 
} 
return allText; 
}

4.2 js分割字符串?(解决)
var allText = getSelectText(); 
//alert(allText); 
// 每个option的内容分割开来 
var eachOptin = new Array(); 
eachOptin=allText.split(","); //字符分割

4.3 如何在js中匹配?
//如果option内容中有输入的内容就返回第一次匹配的位置(大于等于0),如果没有匹配的就返回-1 
var flag = eachOptin[i].indexOf(shuru) ;

5. 如何让匹配的内容显示在option的前面的选项?(通过改变option的index编号)( 解决)
方法:当查到匹配的选项的时候,将第一个option重新新增到select最后,然后,将第一个的值重置为匹配的option的值,然后删掉原始匹配的option
7. js 实现select标签右边三角的功能(未解决,当搜索之后,直接显示所有option选项可供选择)
8.在匹配的option选项有多个的时候出现bedug,注意测试,和重新修改一下,应该是上面第五条中的逻辑问题
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>测试</title> 
<script> 
function onku() 
{ 
//获得input输入框的内容 
var shuru = document.getElementById('ccdd').value; 
var object = document.getElementsByTagName('select'); 
var obj = object[0]; 
//如果输入的内容为空,所有的选项都匹配 
if(shuru!= '') 
{ 
//alert(shuru); 
//获得option中的所有内容 
var allText = getSelectText(); 
//alert(allText); 
// 每个option的内容分割开来 
var eachOptin = new Array(); 
eachOptin=allText.split(","); //字符分割 
var f = 1; 
for (i=1;i<eachOptin.length-1 ;i++ ) 
{ 
//alert(eachOptin[i]); 
//如果option内容中有输入的内容就返回第一次匹配的位置(大于等于0),如果没有匹配的就返回-1 
var flag = eachOptin[i].indexOf(shuru) ; 
if(flag >=0) 
{ 
//alert(i); 
//将index为f的option重新新增一遍,显示在最后 
obj.options.add(new Option(obj[i].innerText,obj[f].value)); 
//将编号为f的option重新赋值,赋值为符合条件的第一个option 
obj.options[f]=new Option(eachOptin[i],eachOptin[i]); 
//删除最初存在的符合条件的option 
obj.remove(i); 
f++; 
} 
} 
} 
} 
function getSelectText() 
{ 
//获得所有select标签 
var object = document.getElementsByTagName('select'); 
//因为该html中只有一个select标签,所以就是name = "aabb"代表的标签 
var obj = object[0]; 
//alert(obj.length); 
//alert(obj[0]); 
//保存所有option 的值 
var allText; 
for(i=0;i<obj.length;i++) 
{ 
//alert(obj[i].index);//获得option的index编号 
//alert(obj[i].value);//获得option的value的值 
allText+= obj[i].innerText+','; //关键是通过option对象的innerText属性获取到选项文本 
} 
return allText; 
} 
</script> 
</head> <body> 
<span style=" position:absolute;border:1pt solid #c1c1c1; overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);"> 
<select name="aabb" id="aabb" style="width:190px;height:20px;margin:-2px;" 
onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;"> 
<option value="" style="color:#c2c2c2;">--请选择--</option> 
<option value="北京">北京</option> 
<option value="上海">上海</option> 
<option value="广州">广州</option> 
<option value="上123">上123</option> 
<option value="苏州">苏州</option> 
</select> 
</span> 
<span style="position:absolute; border:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;"> 
<input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="width:170px;height:15px;border:0pt;" onkeyup="onku()"> 
</span> 
</body> 
</html>

注意代码中的注释
上面代码的运行结果如下:
js实现带搜索功能的下拉框实时搜索实时匹配
Javascript 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
查看大图功能代码jquery版
Nov 05 #Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 #Javascript
iframe子页面获取父页面元素的方法
Nov 05 #Javascript
jquery统计复选框选中示例
Nov 05 #Javascript
jquery实现滑动图片自己测试的例子
Nov 05 #Javascript
用js实现in_array的方法
Nov 05 #Javascript
jquery遍历数组与筛选数组的方法
Nov 05 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python内置模块turtle绘图详解
2017/12/09 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
用Python进行websocket接口测试
2020/10/16 Python
Android面试宝典
2013/08/06 面试题
求职自荐信
2013/12/14 职场文书
三年级科学教学反思
2014/01/29 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书