js实现带搜索功能的下拉框实时搜索实时匹配_javascript技巧
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>
注意代码中的注释
上面代码的运行结果如下:


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

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

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

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

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

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

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

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

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