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:

示例：