jquery的模糊查詢?nèi)绾螌崿F(xiàn)子元素跟隨父元素？

將input和查詢框外面加一層div，給div相對定位position:relative;然后讓查詢框相對于div定位position:absolute;位置自己調(diào)一下。聯(lián)想框固定五個的話需要一個固定顯示五個的高度，然后加上overflow-y：auto;超出的部分會出現(xiàn)滾動條

創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設與網(wǎng)絡營銷，包括成都網(wǎng)站建設、網(wǎng)站設計、SEO優(yōu)化、網(wǎng)絡推廣、整站優(yōu)化營銷策劃推廣、電子商務、移動互聯(lián)網(wǎng)營銷等。創(chuàng)新互聯(lián)公司為不同類型的客戶提供良好的互聯(lián)網(wǎng)應用定制及解決方案，創(chuàng)新互聯(lián)公司核心團隊10余年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設服務，在網(wǎng)站建設行業(yè)內(nèi)樹立了良好口碑。

jQuery實現(xiàn)模糊查詢的方法分析

本文實例講述了jQuery實現(xiàn)模糊查詢的方法。分享給大家供大家參考，具體如下：

需求：list列表內(nèi)容很多，用戶需要找出列表內(nèi)容中的某些條目，只有當與用戶輸入值匹配的條目才顯示出來。（后臺無分頁，直接異步接口返回數(shù)據(jù)添加形成的內(nèi)容列表）

雖然可以通過傳參再調(diào)用查詢出來，但這里主要記錄的是前端處理進行模糊查詢而無需再次調(diào)用接口的實現(xiàn)方法。

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"內(nèi)容1/div

div內(nèi)容2/div

div內(nèi)容3/div

div內(nèi)容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{

//

以下是匹配某些列的內(nèi)容，如果是匹配全部列的話就把find()和.parent()去掉即可

$(".list-content

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

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

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

//重新刷新列表把隱藏的dom結(jié)構(gòu)去掉。

}

});

}

分析：以上即實現(xiàn)了前端js的模糊查詢功能啦，哈哈。代碼中監(jiān)聽事件中多加了input，據(jù)說是為兼容iOS的，具體沒測試，有哪位大神測試了可以告知一聲哈，謝謝了。

還有個問題就是，以上實現(xiàn)方法，當列表內(nèi)容多大幾千條數(shù)目或者更多時，表單輸入時會出現(xiàn)卡頓的情況，因為要通過js操作大量的DOM結(jié)構(gòu)啊（隱藏或顯示），PC上或許情況還沒有那么嚴重，在手機上測試時那真的是“怎一個卡字了得”，如果哪位大神有更好的法子，還望加以完善！

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:jQuery實現(xiàn)select模糊查詢（反射機制）jQuery基于xml格式數(shù)據(jù)實現(xiàn)模糊查詢及分頁功能的方法jQuery實現(xiàn)id模糊查詢的小例子jQuery簡單實現(xiàn)的HTML頁面文本框模糊匹配查詢功能完整示例jquery

zTree異步加載、模糊搜索簡單實例分享jquery

ztree實現(xiàn)模糊搜索功能jquery

easyui

combobox模糊過濾(示例代碼)jQuery實現(xiàn)多級聯(lián)動下拉列表查詢框JQuery+Ajax實現(xiàn)數(shù)據(jù)查詢、排序和分頁功能jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實例

使用JQuery寫可以實現(xiàn)模糊查詢后依然能夠顯示下一頁而不是跳回之前的所有條件的下一頁

var url="?${req.queryString}";

if(url.indexOf("pageNumber")==-1){

if(url=="?"){

url+="pageNumber="+num;

}else{

url+="pageNumber="+num;

}

}else{

var url0=url.substring(0,url.indexOf("pageNumber")+11);

var url1=url.substring(url.indexOf("pageNumber")+11,url.length);

if(url1.indexOf("")==-1){

url=url0+num;

}else{

url=url0+num+url1.substring(url1.indexOf(""),url1.length);

}

}

感覺你這里點擊頁面的時候并沒有吧模糊匹配后的值在傳到后臺進行搜索，返回總的記錄數(shù)，默認模糊匹配第一頁的時候是對的嗎？那么在你點擊下一頁的時候在函數(shù)里頭alert下是否有搜索參數(shù)，或者url里頭是否帶搜索參數(shù)了

jquery removeClass 模糊去除 帶 '??_current' class 怎么實現(xiàn)。。

你好！

下面的方法雖然麻煩了點，但還是可以實現(xiàn)的····

script

$(document).ready(function(){

$(this).click(function(){

//查找所有含有current的class的對象

var?arr?=?$.find("[class*='current']");

$.each(arr,function(){

//遍歷時,將每個對象的class按空格分割為數(shù)組

var?arrCls?=?this.className.split('?');

//通過過濾函數(shù)去掉含有current的類,保留其他的class(如果有的話)

this.className?=?$.grep(arrCls,function(n,i){

return?n.indexOf('current')0;

},true);

});

});

});

/script

正則應該用起來更快~~可惜不會····

網(wǎng)站名稱：jquery模糊,jquery模糊查詢多選
鏈接分享：http://sd-ha.com/article12/hoosgc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、、品牌網(wǎng)站建設、網(wǎng)站設計、網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)