首页 web前端 js教程 js实现带搜索功能的下拉框实时搜索实时匹配_javascript技巧

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

May 16, 2016 pm 05:17 PM
下拉框 搜索功能

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{
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,注意测试,和重新修改一下,应该是上面第五条中的逻辑问题
代码如下:
复制代码 代码如下:





测试
<script> <BR>function onku() <BR>{ <BR>//获得input输入框的内容 <BR>var shuru = document.getElementById('ccdd').value; <BR>var object = document.getElementsByTagName('select'); <BR>var obj = object[0]; <BR>//如果输入的内容为空,所有的选项都匹配 <BR>if(shuru!= '') <BR>{ <BR>//alert(shuru); <BR>//获得option中的所有内容 <BR>var allText = getSelectText(); <BR>//alert(allText); <BR>// 每个option的内容分割开来 <BR>var eachOptin = new Array(); <BR>eachOptin=allText.split(","); //字符分割 <BR>var f = 1; <BR>for (i=1;i<eachOptin.length-1 ;i++ ) <BR>{ <BR>//alert(eachOptin[i]); <BR>//如果option内容中有输入的内容就返回第一次匹配的位置(大于等于0),如果没有匹配的就返回-1 <BR>var flag = eachOptin[i].indexOf(shuru) ; <BR>if(flag >=0) <BR>{ <BR>//alert(i); <BR>//将index为f的option重新新增一遍,显示在最后 <BR>obj.options.add(new Option(obj[i].innerText,obj[f].value)); <BR>//将编号为f的option重新赋值,赋值为符合条件的第一个option <BR>obj.options[f]=new Option(eachOptin[i],eachOptin[i]); <BR>//删除最初存在的符合条件的option <BR>obj.remove(i); <BR>f++; <BR>} <BR>} <BR>} <BR>} <BR>function getSelectText() <BR>{ <BR>//获得所有select标签 <BR>var object = document.getElementsByTagName('select'); <BR>//因为该html中只有一个select标签,所以就是name = "aabb"代表的标签 <BR>var obj = object[0]; <BR>//alert(obj.length); <BR>//alert(obj[0]); <BR>//保存所有option 的值 <BR>var allText; <BR>for(i=0;i<obj.length;i++) <BR>{ <BR>//alert(obj[i].index);//获得option的index编号 <BR>//alert(obj[i].value);//获得option的value的值 <BR>allText+= obj[i].innerText+','; //关键是通过option对象的innerText属性获取到选项文本 <BR>} <BR>return allText; <BR>} <BR></script>












注意代码中的注释
上面代码的运行结果如下:
js实现带搜索功能的下拉框实时搜索实时匹配_javascript技巧
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

php Elasticsearch: 如何使用动态映射来实现灵活的搜索功能? php Elasticsearch: 如何使用动态映射来实现灵活的搜索功能? Sep 13, 2023 am 10:21 AM

PHPElasticsearch:如何使用动态映射来实现灵活的搜索功能?引言:在开发现代化的应用程序时,搜索功能是一个不可或缺的部分。Elasticsearch是一个强大的搜索和分析引擎,提供了丰富的功能和灵活的数据建模方式。在本文中,我们将重点介绍如何使用动态映射来实现灵活的搜索功能。一、动态映射简介在Elasticsearch中,映射(mapp

HTML、CSS和jQuery:制作一个带有搜索功能的数据表格 HTML、CSS和jQuery:制作一个带有搜索功能的数据表格 Oct 26, 2023 am 10:03 AM

HTML、CSS和jQuery:制作一个带有搜索功能的数据表格在现代网页开发中,数据表格是经常用到的一种元素。而为了方便用户查找和筛选数据,给数据表格添加搜索功能成为了一个必不可少的功能。本文将介绍如何使用HTML、CSS和jQuery制作一个带有搜索功能的数据表格,并提供具体的代码示例。一、HTML结构首先,我们需要创建一个基本的HTML结构来容纳数据表格

如何利用PHP和Manticore Search开发强大的搜索功能 如何利用PHP和Manticore Search开发强大的搜索功能 Aug 06, 2023 am 10:13 AM

如何利用PHP和ManticoreSearch开发强大的搜索功能概述:搜索功能在现代应用程序开发中起着至关重要的作用。为了实现高效和准确的搜索功能,利用合适的搜索引擎是至关重要的。ManticoreSearch是一种功能强大的全文搜索引擎,它能够提供高性能和可扩展的搜索功能。本文将介绍如何利用PHP和ManticoreSearch开发强大的搜索功能,并

如何使用PHP实现一个拼音首字母搜索功能? 如何使用PHP实现一个拼音首字母搜索功能? Sep 05, 2023 pm 04:10 PM

如何使用PHP实现一个拼音首字母搜索功能?拼音首字母搜索功能在很多应用中都非常常见,特别是在联系人列表或者商品搜索等场景中。本文将介绍如何使用PHP实现一个拼音首字母搜索功能。拼音首字母搜索功能的实现思路是:根据用户输入的关键字,通过匹配关键字与列表中的拼音首字母进行比对,从而筛选出符合条件的结果。首先,我们需要准备一个数据源,可以是一个数组或者数据库表。以

如何在Vue中实现多选下拉框 如何在Vue中实现多选下拉框 Nov 07, 2023 pm 02:09 PM

如何在Vue中实现多选下拉框在Vue开发中,下拉框是常见的表单组件之一。通常情况下,我们都使用单选下拉框来选择一个选项。但是,有时候我们需要实现多选下拉框,以便用户可以同时选择多个选项。在本文中,我们将介绍如何在Vue中实现多选下拉框,并提供具体的代码示例。一、使用ElementUI组件库ElementUI是一套基于Vue的桌面端组件库,提供了丰富的UI

如何在Vue中实现搜索功能 如何在Vue中实现搜索功能 Nov 07, 2023 pm 03:45 PM

在实现前端功能的过程中,搜索功能是一个常见的需求。Vue作为一种流行的前端框架,也能很好地支持搜索功能的实现。本文将为大家介绍如何在Vue中实现搜索功能,并提供具体的代码示例。一、准备工作在实现搜索功能之前,我们需要准备一个数据源,即一些需要进行搜索的数据。在本文的示例中,我们使用一个包含书籍信息的数组作为数据源,格式如下:books:[{

PHP开发实践:如何使用PHP和MySQL实现搜索功能 PHP开发实践:如何使用PHP和MySQL实现搜索功能 Jul 02, 2023 pm 08:31 PM

PHP开发实践:如何使用PHP和MySQL实现搜索功能引言:在现代互联网应用中,搜索功能是非常常见和重要的功能之一。使用PHP和MySQL来实现搜索功能,可以为用户提供更好的用户体验和数据检索能力。本文将介绍如何使用PHP和MySQL来实现搜索功能,并提供相应的代码示例。一、创建数据库和表格首先,我们需要创建一个数据库,并在该数据库中创建一个用于存储搜索相关

利用PHP和Manticore Search开发云端搜索功能 利用PHP和Manticore Search开发云端搜索功能 Aug 05, 2023 pm 04:43 PM

利用PHP和ManticoreSearch开发云端搜索功能随着互联网的快速发展,用户对于搜索引擎的需求也变得越来越高。为了满足用户对搜索功能的要求,开发一个高效的搜索引擎是非常关键的。本文将介绍如何利用PHP和ManticoreSearch开发云端搜索功能,并附加一些代码示例来帮助读者更好地理解。ManticoreSearch简介ManticoreS

See all articles