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 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP面向对象法则
2012/02/23 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python提取网页中超链接的方法
2016/09/18 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
主管会计岗位职责
2014/03/13 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
最新离婚协议书范本
2014/08/19 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
岁月神偷观后感
2015/06/11 职场文书
格林童话读书笔记
2015/06/30 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书