jQuery實作模糊查詢實戰案例解析
這次帶給大家jQuery實作模糊查詢實戰案例解析,jQuery實作模糊查詢的注意事項有哪些,下面就是實戰案例,一起來看一下。
需求:list清單內容很多,使用者需要找出清單內容中的某些項目,只有當與使用者輸入值相符的條目才顯示出來。 (後台無分頁,直接非同步介面返回資料新增形成的內容清單)
#雖然可以透過傳參再呼叫查詢出來,但這裡主要記錄的是前端處理進行模糊查詢而無需再次呼叫介面的實作方法。
html部分:
<p class="search-form"> <input type="text" placeholder="请输入关键词"> <span class="icon-clear"></span> </p> <p class="content"> <p class="title row no-gutter"> <p class="col-20">列表一</p> <p class="col-20">列表二</p> <p class="col-20">列表三</p> <p class="col-20">列表四</p> <p class="col-20">列表五</p> </p> <p class="list-content"> <ul> <li> <p class="code">00001</p> <p class="name">内容1</p> <p>内容2</p> <p>内容3</p> <p>内容4</p> </li> <li>……</li> </ul> </p> </p>
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的,具體沒測試,有哪位大神測試了可以告知一聲哈,謝謝了。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:React如何在react-router路由實現登陸驗證控制
以上是jQuery實作模糊查詢實戰案例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

12306訂票app下載最新版是一款大家非常滿意的出行購票軟體,想去哪裡就去那裡非常方便,軟體內提供的票源非常多,只需要通過實名認證就能在線購票,所有用戶的出行車票機票都可以輕鬆買到,享受不同的優惠折扣。還能提前開啟預約搶票,預約飯店、專車接送都是可以的,有了它想去哪裡就去那裡一鍵購票,出行更加簡單方便,讓大家的出行體驗更舒服,現在小編在線詳細為12306用戶帶來查看歷史購票記錄的方法。 1.打開鐵路12306,點擊右下角我的,點擊我的訂單 2.在訂單頁面點擊已支付。 3.在已支付頁

學信網如何查詢自己的學歷?在學信網中是可以查詢到自己的學歷,很多用戶都不知道如何在學信網中查詢到自己的學歷,接下來就是小編為用戶帶來的學信網查詢自己學歷方法圖文教程,感興趣的用戶快來一起看看吧!學信網使用教程學信網如何查詢自己的學歷一、學信網入口:https://www.chsi.com.cn/二、網站查詢:第一步:點選上方學信網位址,進入首頁點選【學歷查詢】;第二步:在最新的網頁中點選如下圖箭頭所示的【查詢】;第三步:之後在新頁面點選【的登陸學信檔案】;第四步:在登陸頁面輸入資料點選【登陸】;

PHP實戰:快速實現斐波那契數列的程式碼範例斐波那契數列是數學中一個非常有趣且常見的數列,其定義如下:第一個和第二個數為0和1,從第三個數開始,每個數都是前兩個數的和。斐波那契數列的前幾個數字依序為0,1,1.2,3,5,8,13,21,...依此類推。在PHP中,我們可以透過遞歸和迭代兩種方式來實現斐波那契數列的生成。下面我們分別來展示這兩

MySQL與PL/SQL是兩種不同的資料庫管理系統,分別代表了關係型資料庫和過程化語言的特性。本文將比較MySQL和PL/SQL的異同點,並附帶具體的程式碼範例進行說明。 MySQL是一種流行的關聯式資料庫管理系統,採用結構化查詢語言(SQL)來管理和操作資料庫。而PL/SQL是Oracle資料庫特有的過程化語言,用於編寫預存程序、觸發器和函數等資料庫物件。相同

標題:如何使用Oracle查詢表格是否被鎖定?在Oracle資料庫中,表鎖是指當一個事務正在對錶執行寫入操作時,其他事務想要對該表執行寫入操作或對表進行結構改變(如增加列、刪除行等)時會被阻塞。在實際開發過程中,我們經常需要查詢表格是否被鎖,以便更好地排除和處理相關問題。本文將介紹如何使用Oracle語句查詢表格是否被鎖,並給出具體的程式碼範例。要查詢表是否被鎖,我們

使用蘋果手機想要查詢啟動日期,最好的方法是透過手機中的序號來查詢,也可以透過存取蘋果的官網來進行查詢,透過連接電腦查詢,下載第三方軟體查詢。蘋果手機怎麼查詢啟動日期答:序號查詢,蘋果官網查詢,電腦查詢,第三方軟體查詢1、用戶最好的方式就是知道自己手機的序號,開啟設定通用關於本機就可以看到序號。 2.使用序號不僅可以知道自己手機的啟動日期,還可以查看手機版本,手機產地,手機出廠日期等。 3.用戶訪問蘋果的官網找到技術支持,找到頁面底部的服務和維修欄目,裡面查看iPhone的激活信息。 4.用戶

論壇是網路上非常常見的網站形式之一,它為使用者提供了一個分享資訊、交流討論的平台。而Discuz是一款常用的論壇程序,相信很多站長都已經非常熟悉了。在進行Discuz論壇的開發和管理過程中,經常需要查詢資料庫中的資料來進行分析或處理。在這篇文章中,我們將分享一些查詢Discuz資料庫位置的技巧,並提供具體的程式碼範例。首先,我們需要了解Discuz的資料庫結構

查詢BitTorrent幣(BTT)最新價格BTT是TRON區塊鏈上的加密貨幣,用於獎勵BitTorrent網路用戶分享和下載檔案。尋找BTT最新價格的方法如下:選擇一個可靠的價格查詢網站或應用程式。一些常用的價格查詢網站包括:CoinMarketCap:https://coinmarketcap.com/Coindesk:https://www.coindesk.com/幣安:https://www.binance.com/在網站或應用程式中搜尋BTT。查看BTT的最新價格。注意:加密貨幣價格
