搜索框实现模糊查询方法 - js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了搜索框实现模糊查询方法 - js相关的知识，希望对你有一定的参考价值。
参考技术A 日常开发中经常会遇到搜索框查询的例子，需要对数组中的元素进行检索并查询出所需的结果，通过如下方式简单实现了一个小的模糊查询，具体如下：首先，用到了两个方法
1.对数组通过 filter 的方式遍历查询搜索的 key
2.对遍历出的结果进行字符串的模糊查询 str.indexOf("xxx") != -1
其次，通过如上两种方法的组合从而获得一个类似模糊查询的效果；
最后，具体实现 code 如下：
此次实现搭配使用的是该 Vant Search 组件
UI 部分很简单直接根据 demo 实例集成即可。
以上便是此次分享的全部内容，希望能对大家有所帮助！
html5实现下拉框模糊查询,JS Select下拉框(支持输入模糊查询)
function SelectValue(obj)
{
document.all.box2.value = obj.options[obj.selectedIndex].text;
}
var j = 0;
function InputValue(obj)
{
var n = 1;
var tmpObj;
var src = document.all.SelectOption;
var msg = document.all.msg;
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){
if(obj.value!=""){
msg.style.display="";
msg.innerHTML="";
if(msg.hasChildNodes())
{
msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);
}
for (var i=0;i
var selValue = document.createElement("div");
var selText = document.createElement("div");
selText.value = src(i).value;
selText.innerHTML = src(i).text;
if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){
selText.setAttribute("id","selText"+n);
selText.οnmοuseοver=function (){
this.style.backgroundColor='#003399';
this.style.color ='#ffffff';
}
selText.οnmοuseοut=function (){
this.style.backgroundColor='#ffffff';
this.style.color ='#000000';
}
selText.οnclick=function (){
document.all.box2.value = this.innerHTML;
msg.style.display="none";
document.getElementById("txtSection").value=this.value;
}
msg.appendChild(selText);
n++;
}
}
}
else {
document.all.msg.style.display="none";
}
}
else {
//press down key
if(event.keyCode==40){
j++;
for (var i=0; i
{
tmpObj = document.getElementById("selText"+i);
if(tmpObj != null){
tmpObj.style.backgroundColor='#ffffff';
tmpObj.style.color ='#000000';
}
}
tmpObj = document.getElementById("selText"+j);
if(tmpObj != null){
tmpObj.style.backgroundColor='#003399';
tmpObj.style.color ='#ffffff';
}else{
j = 0;
}
}
//press up key
if (event.keyCode==38){
j--;
for (var i=0; i
{
tmpObj = document.getElementById("selText"+i);
if(tmpObj != null){
tmpObj.style.backgroundColor='#ffffff';
tmpObj.style.color ='#000000';
}
}
tmpObj = document.getElementById("selText"+j);
if(tmpObj != null){
tmpObj.style.backgroundColor='#003399';
tmpObj.style.color ='#ffffff';
}else{
j = 2;
}
}
//press enter key
if (event.keyCode==13){
tmpObj = document.getElementById("selText"+j);
document.all.box2.value = tmpObj.innerHTML;
msg.style.display="none";
document.getElementById("txtSection").value=tmpObj.value;
}
}
}
function SelMatch(src)
{
var currSel = document.all.box2.value;
for (var i=0;i
if (src(i).text==currSel)
{
src.options(i).selected = true;
}
}
}
function NoMsg()
{
if(document.activeElement.id=="msg")
return false;
else
document.all.msg.style.display='none';
}
| 查询 |
ALL 管理者1 管理者2 管理者3 业务员3 业务员3 13 103 | ||
以上是关于搜索框实现模糊查询方法 - js的主要内容，如果未能解决你的问题，请参考以下文章