js模糊搜索代码是什么

本文目录一览：

• 1、js实现模糊查询

• 2、jQuery实现模糊查询的方法分析

• 3、js实现中英文模糊搜索

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

• 5、VUE开发–fuse.js模糊搜索(三十五)

js实现模糊查询

前端进行模糊查询需要用到new RegExp() 正则表达式。

RegExp:

这里需要用到的方法是exec,意思是检索字符串中指定的值。返回找到的值，并确定其位置。

首先初始化两个数组，一个用于渲染，一个用于保持基本数据：

jQuery实现模糊查询的方法分析

本文实例讲述了jQuery实现模糊查询的方法。分享给大家供大家参考，具体如下：

需求：list列表内容很多，用户需要找出列表内容中的某些条目，只有当与用户输入值匹配的条目才显示出来。（后台无分页，直接异步接口返回数据添加形成的内容列表）

虽然可以通过传参再调用查询出来，但这里主要记录的是前端处理进行模糊查询而无需再次调用接口的实现方法。

html部分：

div

class="search-form"

input

type="text"

placeholder="请输入关键词"

span

class="icon-clear"/span

/div

div

class="content"

div

class="title

row

no-gutter"

div

class="col-20"列表一/div

div

class="col-20"列表二/div

div

class="col-20"列表三/div

div

class="col-20"列表四/div

div

class="col-20"列表五/div

/div

div

class="list-content"

ul

li

div

class="code"00001/div

div

class="name"内容1/div

div内容2/div

div内容3/div

div内容4/div

/li

li……/li

/ul

/div

/div

js部分：

queryList:

function(){

$(".search-input").on("input

propertychange",

function()

{

var

queryStr

=

$.trim($(".search-input").val());

if(queryStr

===

''){

$(".list-content

li").show();

}else{

//

以下是匹配某些列的内容，如果是匹配全部列的话就把find()和.parent()去掉即可

$(".list-content

li").hide().find(".code,

.name").filter(":contains('"+queryStr+"')").parent("li").show();

//$(".list-content").refresh();

//重新刷新列表把隐藏的dom结构去掉。

}

});

}

分析：以上即实现了前端js的模糊查询功能啦，哈哈。代码中监听事件中多加了input，据说是为兼容iOS的，具体没测试，有哪位大神测试了可以告知一声哈，谢谢了。

还有个问题就是，以上实现方法，当列表内容多大几千条数目或者更多时，表单输入时会出现卡顿的情况，因为要通过js操作大量的DOM结构啊（隐藏或显示），PC上或许情况还没有那么严重，在手机上测试时那真的是“怎一个卡字了得”，如果哪位大神有更好的法子，还望加以完善！

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:jQuery实现select模糊查询（反射机制）jQuery基于xml格式数据实现模糊查询及分页功能的方法jQuery实现id模糊查询的小例子jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例jquery

zTree异步加载、模糊搜索简单实例分享jquery

ztree实现模糊搜索功能jquery

easyui

combobox模糊过滤(示例代码)jQuery实现多级联动下拉列表查询框JQuery+Ajax实现数据查询、排序和分页功能jquery处理页面弹出层查询数据等待操作实例

js实现中英文模糊搜索

varChinese=newRegExp('[\u4E00-\u9FA5]+')//中文

varLetter=newRegExp('[A-Za-z]+')//字母

if(Chinese.test(this.systemInput)){

//中文搜索

this.showOpList=this.List.filter(array={

if(array.title!=undefined){

returnarray.title.indexOf(this.systemInput)=0

}

returnfalse

})

}

if(Letter.test(this.systemInput)){

//字母搜索

this.showOpList=this.List.filter(array={

letflag=false

if(array.letter!=undefined){

flag=array.letter.indexOf(this.systemInput)=0

}

if(array.spelling!=undefined!flag){

flag=array.spelling.indexOf(this.systemInput)=0

}

returnflag

})

}

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

本文实例讲述了JS实现表格数据各种搜索功能。可忽略大小写,模糊搜索,多关键搜索。分享给大家供大家参考。具体实现方法如下：

复制代码

代码如下:!DOCTYPE

html

html

head

meta

charset="utf-8"

title/title

script

type="text/javascript"

window.onload=function(){

var

oTab=document.getElementById("tab");

var

oBt=document.getElementsByTagName("input");

oBt[1].onclick=function(){

for(var

i=0;ioTab.tBodies[0].rows.length;i++)

{

var

str1=oTab.tBodies[0].rows[i].cells[1].innerHTML.toUpperCase();

var

str2=oBt[0].value.toUpperCase();

//使用string.toUpperCase()(将字符串中的字符全部转换成大写)或string.toLowerCase()(将字符串中的字符全部转换成小写)

//所谓忽略大小写的搜索就是将用户输入的字符串全部转换大写或小写，然后把信息表中的字符串的全部转换成大写或小写，最后再去比较两者转换后的字符就行了

/*******************************JS实现表格忽略大小写搜索*********************************/

if(str1==str2){

oTab.tBodies[0].rows[i].style.background='red';

}

else{

oTab.tBodies[0].rows[i].style.background='';

}

/***********************************JS实现表格的模糊搜索*************************************/

//表格的模糊搜索的就是通过JS中的一个search()方法，使用格式，string1.search(string2);如果

//用户输入的字符串是其一个子串，就会返回该子串在主串的位置，不匹配则会返回-1，故操作如下

if(str1.search(str2)!=-1){oTab.tBodies[0].rows[i].style.background='red';}

else{oTab.tBodies[0].rows[i].style.background='';}

/***********************************JS实现表格的多关键字搜索********************************/

//表格的多关键字搜索，加入用户所输入的多个关键字之间用空格隔开，就用split方法把一个长字符串以空格为标准，分成一个字符串数组，

//然后以一个循环将切成的数组的子字符串与信息表中的字符串比较

var

arr=str2.split('

');

for(var

j=0;jarr.length;j++)

{

if(str1.search(arr[j])!=-1){oTab.tBodies[0].rows[i].style.background='red';}

}

}

}

}

/script

/head

body

姓名:input

type="text"

/

input

type="button"

value="搜索"/

table

border="1"

bordercolor="blue"

id="tab"

thead

tdh2ID/h2/td

tdh2Name/h2/td

tdh2Age/h2/td

/thead

tbody

tr

td1/td

tdBlue/td

td15/td

/tr

tr

td2/td

tdMikyou/td

td26/td

/tr

tr

td3/td

tdweak/td

td24/td

/tr

tr

td4/td

tdsky/td

td35/td

/tr

tr

td5/td

td李四/td

td18/td

/tr

/tbody

/table

/body

/html

希望本文所述对大家的javascript程序设计有所帮助。

VUE开发–fuse.js模糊搜索(三十五)

Fuse.js是一个Apache License开源项目。

Fuse.js是一种轻量级的模糊搜索，在JavaScript中，没有依赖关系。

浏览器支持：

Chrome

Safari 4+

Firefox 3.5+

IE 6,7,8,9+

Opera 10.6+

Mobile Safari (iOS 4+)

github:

示例：