用js如何实现模糊查询带下拉菜单?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用js如何实现模糊查询带下拉菜单?相关的知识,希望对你有一定的参考价值。

这个功能是怎么实现的,鼠标还能点进去,这些内容写在了<ul><li>里了。
<div><input type="text"></div>
<div class="daohang">
<div class="yiji">一级导航</div>
<ul class="erji">
<li>二级导航1</li>
<li>二级导航2</li>
</ul>

<div class="yiji">一级导航</div>
<ul class="erji">
<li>二级导航3</li>
<li>二级导航4</li>
</ul>
</div>
导航里的内容如何实现图片的搜索模式?谢谢!

首先网页中有一个隐藏的所有候选项的列表,然后你在输入框中每次按下按键输入的时候,会触发事件(例如keydown,keyup等),事件里面会执行模糊匹配,依次判断列表中的每个选项是否包含你输入的内容。把包含的选项显示出来就是你看到的效果了
如果没有那很可能是每次你输入内容的时候,触发的事件函数里有ajax请求,向后台服务器查询包含你输入内容的选项,然后服务器返回结果,在页面上动态显示。
参考技术A js模糊查询 定位select 下拉框

//功能:快速定位select中内容的方法
//描述:当txt中的内容变化时,下拉框的内容跟着定位。比如当在input中录入a时,select中定位到第一个有a开头的元素。
// 该方法是为选择炉号、选择钢号、选择生产号三个select元素用的。
//参数:selectName是select元素的名字,inputText是input中已经录入了的内容。

function txtOnChange(selectName,inputText)
if (selectName.selectedIndex!=-1)
selectName.options(selectName.selectedIndex).selected = false;

/*当selectName长度不固定时,短selectName的定位*/
for (i=0;i<selectName.options.length;i++)
if (selectName.options(i).text == inputText)
selectName.options(i).selected = true;
return;


for (i=0;i<selectName.options.length;i++)
if (selectName.options(i).text.indexOf(inputText)!=-1)
selectName.options(i).selected = true;
return;




//功能:当text得到焦点时,清空内容
//描述:同上
//参数:oText,触发该函数的text元素。

function txtOnfocus(oText)
oText.value="";


文本框使用 onkeyup事件
参考技术B 首先网页中有一个隐藏的所有候选项的列表,然后你在输入框中每次按下按键输入的时候,会触发事件(例如keydown,keyup等),事件里面会执行模糊匹配,依次判断列表中的每个选项是否包含你输入的内容。把包含的选项显示出来就是你看到的效果了
如果没有那很可能是每次你输入内容的时候,触发的事件函数里有ajax请求,向后台服务器查询包含你输入内容的选项,然后服务器返回结果,在页面上动态显示。
提问者评价
谢谢!

jqgrid表格里面的下拉框能不能实现模糊查询

图上,机场中文名是使用下拉框,但是这种下拉框选择不能模糊查询很不方便,

参考技术A 在表sheet1的A1中输入一个数字如6,然后在表sheet中的随便一格中输入:

=Sheet1!A1

它就会显示6

如果将表sheet1的中数字改变,如改为9,再到表sheet中看,那一格同样变成了9

就是这样了追问

不是excel,使用java。。

以上是关于用js如何实现模糊查询带下拉菜单?的主要内容,如果未能解决你的问题,请参考以下文章

C# 模糊查询带出下拉列表的问题

jqgrid表格里面的下拉框能不能实现模糊查询

C#中combobox如何实现模糊查询,并能自动显示下拉列表

搜索框实现模糊查询方法 - js

java如何实现异步模糊查询

下拉菜单中获得数据并传到后台,js代码如何实现?