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

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>

注意代码中的注释
上面代码的运行结果如下:

时间: 2013-11-02

JS仿百度搜索自动提示框匹配查询功能

1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q

JavaScript数组的快速克隆(slice()函数)和数组的排序、乱序和搜索(sort()函数)

JavaScript中对变量的操作都是通过引用方式,而对数组也一样. 前两天想要对一个数组进行复制,一直苦于找不到办法(遍历的方法俺是绝对不采用的) 无意中拿起<JavaScript权威指南>翻了翻数组的操作函数,发现了slice()函数. slice()原来是用来截取数组中的一部分,这里我用它来复制数组,它的格式如下: array.slice(start, end) 如果省略了end参数,则切分的数组包含从start开始到数组结束的所有元素. 现在要用它来复制数组,就一行,呵呵: var n

js调用百度地图及调用百度地图的搜索功能

js调用百度地图的方法 代码如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&

JavaScript实现前端实时搜索功能

大部分页面都具备搜索功能.而作为前端,我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户,具体实现如下: 1.基本布局: <div class="searcher"> <p class="searcher-main"> <i><img src="img/icon/icon-search-map.png"/></i> <input class="searcher

JS使用replace()方法和正则表达式进行字符串的搜索与替换实例

1.JS字符串的替换及replace()方法的使用 replace(regexp,replacement)方法有两个参数,第一参数可以是一个纯文本字符串或是一个RegExp对象,具体请看RegExp对象的使用:第二个参数可是一个字符串也可以是一个函数. 以下是JS字符串替换的举例: 例1: 复制代码 代码如下: var str="Hello world!";document.write(str.replace(/world/, "phper")); 例2: 复制代码

JS实现表格数据各种搜索功能的方法

本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <script type="text/javascript">    window.onl

用JS将搜索的关键字高亮显示实现代码

用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

JS 页面内容搜索,类似于 Ctrl+F功能的实现代码

<html>  <META HTTP-EQUIV="Content-Type" content="text/html; charset=gb_2312-80">  <TITLE>WinWebMail</TITLE>  <script language="JavaScript">  <!--   function doZoom(size){      document.getElem

js实现搜索框关键字智能匹配代码

只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

javascript搜索自动提示功能的实现第1/3页

使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能一如往常,demo和源码的zip包在文章最后,慢慢欣赏吧! 我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做.而知道这些可以让你对这个插件可以进一步的按自己的需求定制(关于这一点我在我的blog里写过不少关于其他应用的文章). 好,我们现在开始. JavaScript代码: 复制代码 代码如下: <script src=&quo

使用Ajax模仿百度搜索框的自动提示功能实例

啊啊,熬夜了.今天学习了ajax给我的感觉就是,"哇塞"ajax好酷炫哦,(额...后端狗,接触到了大前端的魅力了),这么晚了还是直奔主题把.Let's go! 百度搜索提示框,我想大家都很熟悉了把,是什么样子我也就不再赘述.直接看代码 来我们写一个简陋的jsp页面 Look! 是这个样子的 下面是代码: <%@ page language="java" contentType="text/html; charset=UTF-8" page

ASP.NET输入文本框自动提示功能

在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需要做个类似的效果,该如何做到呢? 很简单,我们只要借助于一个JQuery强大的插件JQuery AutoComplete来完成这个效果就可以了.这个插件的官方地址为:JQuery AutoComplete,里面也有示例代码. 下面我们将以一个身份证号自动查询为例,来看看JQuery AutoComp

Android编程实现输入框动态自动提示功能

本文实例讲述了Android编程实现输入框动态自动提示功能.分享给大家供大家参考,具体如下: 关于AutoCompleteTextView的使用,我想大家并不陌生,对其设定上Adapter后系统便能自己识别与匹配了.近期 一个项目中,需要做到匹配通迅录中的电话号码和联系人,由于通迅录中数据量大,所以把所有的数据在自己提示之前就查询出来并加入到 AutoCompleteTextView中是不现实的,所以我们可以使用cursor来动态加载AutoCompleteTextView的数据,从而 实现时时

Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用示例

本文实例讲述了Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用.分享给大家供大家参考,具体如下: 现在我们上网几乎都会用百度或者谷歌搜索信息,当我们在输入框里输入一两个字后,就会自动提示我们想要的信息,这种效果在Android 里是如何实现的呢? 事实上,Android 的AutoCompleteTextView Widget ,只要搭配ArrayAdapter 就能设计同类似Google 搜索提示的效果. 本例子先在Layout 当中布局一个AutoCom

基于chosen插件实现人员选择树搜索自动筛选功能

要实现的功能截图: 要求: 1.点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态 2.勾选树右侧树的复选框左侧出现相应的内容 我用到的插件 vue+chosen+ztree vue:组件化的MVVM库 chosen:单选列表和多选列表增强 ztree:基于jquery的树插件 分析 chosen插件已经可以实现1中的大部分效果,我们只需要预先获取数据,实现左右两侧一 一对应,最后点击发送获取最终的数据集合ID 具体实现 chosen需要的htm

Spring Boot自定义配置实现IDE自动提示功能

一.背景 官方提供的spring boot starter的配置项,我们用IDE配置的时候一般都有自动提示的,如下图所示 而我们自己自定义的配置却没有,对开发非常不友好容易打错配置, 那这个是怎样实现的呢? 二.提示原理 IDE是通过读取配置信息的元数据而实现自动提示的,而元数据在目录 META-INF 中的 spring-configuration-metadata.json 或者 additional-spring-configuration-metadata.json 三.实现自动提示 以

js输入框邮箱自动提示功能代码实现

同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码 代码如下: <div class="parentCls">    <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要 只需要在input输入框 且父

easyui combobox开启搜索自动完成功能的实例代码

combo.json [{ "id":-1, "text":" ", "spell":"" },{ "id":1, "text":"类型1", "spell":"lx1" },{ "id":2, "text":"类型2", "spell&q

Jquery实现搜索框提示功能示例代码

博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数据量很大的情况下使用Ajax去实现真的不合适,于是,我又写了一个使用Jquery来实现方法. 废话不多说,上图上代码:  引用方式: 复制代码 代码如下: <body style="background-color: White;"> <form id="for