jQuery搜尋框關鍵字自動匹配提示詳解
本章節分享一段程式碼例項,它實現了搜尋框輸入關鍵字能夠自動匹配提示效果。
類似應用非常廣泛,比如搜尋引擎都採用類似效果(實現原理可能完全不同);下面分享的程式碼僅僅是靜態演示,實際應用中還需要配合資料等實現。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #demo-wrap { position:relative; margin:0 auto; width:260px; overflow:hidden; border:1px solid #DDD; } #demo-wrap .product-head { font-size:12px; padding:8px 4px; background-color:#F1F1F1; } #demo-wrap .product-head p { font-size:14px; font-family:Arial,Helvetica,sans-serif; margin:5px 3px 5px; padding:0 0 5px; } #demo-wrap .filterform { border: 1px solid #999; border-radius: 15px; padding: 4px 12px; background-color: #fff; } #demo-wrap .filterform input { font-size: 12px; padding: 0; border: 0; outline: none; } ul#demo-list li { padding: 8px; list-style: none; border-top: 1px solid #ccc; border-bottom: 1px solid #fff; } ul#demo-list li a { color: #000; font-family: Arial,Helvetica,sans-serif; font-size: 11px; text-decoration: none; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> (function($) { $.expr[":"].Contains = function(a, i, m) { return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; function filterList(header, list) { var form = $("<form>").attr({ "class":"filterform", action:"#" }); var input = $("<input>").attr({ "class":"filterinput", type:"text" }); $(form).append(input).appendTo(header); $(input).change(function() { var filter = $(this).val(); if (filter) { $matches = $(list).find("a:Contains(" + filter + ")").parent(); $("li", list).not($matches).slideUp(); $matches.slideDown(); } else { $(list).find("li").slideDown(); } return false; }).keyup(function() { $(this).change(); }); } $(function() { filterList($("#form"), $("#demo-list")); }); })(jQuery); </script> </head> <body> <div id="demo-wrap"> <div class="product-head"> <p>搜尋列表內容:</p> <div id="form"></div> </div> <ul id="demo-list"> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">div css教程</a></li> <li><a href="#">css教程</a></li> <li><a href="#">javascript教程</a></li> <li><a href="#">jquery教程</a></li> <li><a href="#">css教程</a></li> <li><a href="#">json教程</a></li> <li><a href="#">ajax教程</a></li> <li><a href="#">正規表示式教程</a></li> <li><a href="#">HTML5教程</a></li> <li><a href="#">softwhy.com</a></li> </ul> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).(function($) {}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).$.expr[":"].Contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
},自定義一個選擇器,其實完全沒有必要,jquery就有自帶的contains選擇器,這裡就當學習一個知識。
此選擇器的功能是用來篩選連結<a>文字內容中含有m[3]的連結a元素,m[3],就是給選擇器傳遞的引數。
(3).function filterList(header, list) {},此函式實現了篩選功能,第一個引數div元素的id屬性值,這個div用來存放建立的form元素,第二個引數是ul元素的id屬性值。
(4).var form = $("<form>").attr({
"class":"filterform",
action:"#"
}),建立一個form元素,併為其新增class和action屬性。
(5).var input = $("<input>").attr({
"class":"filterinput",
type:"text"
}),建立一個input元素,併為其新增class和type屬性。
(6).$(form).append(input).appendTo(header),為form元素新增input元素,然後再將form元素新增到div元素中。
(7).$(input).change(function() {}),為input元素註冊change事件處理函式。
(8).var filter = $(this).val(),獲取文字框中的內容。
(9).if (filter) ,判斷要篩選的文字內容不為空。
(10).$matches = $(list).find("a:Contains(" + filter + ")").parent(),獲取li元素集合,這些li元素中的a元素包含輸入的文字內容。
(11).$("li", list).not($matches).slideUp(),將所有的不是滿足
(10)的li元素隱藏。
(12).$matches.slideDown(),將匹配的li元素顯示。
(13).$(list).find("li").slideDown(),如果文字框內容為空,則全部顯示。
(14).keyup(function() {
$(this).change();
}),註冊keyuo事件處理函式,觸發的時候執行change()方法。
二.相關閱讀:
(1).$.expr[":"]參閱$.expr[":"]自定義選擇器用法一章節。
(2).textContent參閱textContent,innerText、innerHTML和outerHTML區別一章節。
(3).toUpperCase()參閱JavaScript toUpperCase()一章節。
(4).indexOf()參閱JavaScript indexof()一章節。
(5).append()參閱jQuery append()一章節。
(6).appendTo()參閱jQuery appendTo()一章節。
(7).find()參閱jQuery find()一章節。
(8).parent()參閱jQuery parent()一章節。
(9).not()參閱jQuery not()一章節。
(10).keyup事件參閱jQuery keyup事件一章節。
相關文章
- jQuery的搜尋關鍵詞自動匹配外掛jQuery
- 搜尋框關鍵字智慧匹配例項程式碼例項
- js搜尋關鍵詞自動匹配功能程式碼例項JS
- 直播系統搭建,可自動模糊匹配的搜尋下拉框
- jquery搜尋下拉提示框/登陸賬號下拉提示框jQuery
- jquery搜尋關鍵詞高亮效果jQuery
- 搜尋引擎關鍵字智慧提示的一種實現
- JavaScript搜尋框提示文字JavaScript
- jQuery 伸縮搜尋框jQuery
- JavaScript 搜尋關鍵字高亮效果JavaScript
- 1688關鍵字搜尋介面
- javascript搜尋關鍵字高亮效果JavaScript
- Android--自動搜尋提示Android
- Jquery + Bootstrap 實現搜尋框jQueryboot
- 【搜尋引擎】 PostgreSQL 10 實時全文檢索和分詞、相似搜尋、模糊匹配實現類似Google搜尋自動提示SQL分詞Go
- 搜尋Oracle DDL中的關鍵字Oracle
- 搜尋檔案中的關鍵字
- Idea全域性搜尋關鍵字Idea
- 匹配搜尋關鍵高亮 new RegEXP 填坑
- 1688關鍵字搜尋新品資料API介面(item_search_new-按關鍵字搜尋新品API
- 義烏購關鍵字搜尋API介面技術詳解與程式碼示例API
- item_search - 按關鍵字搜尋商品
- 淘寶API,按關鍵字搜尋淘寶商品API
- 1688關鍵字搜尋介面測試
- Android--多選自動搜尋提示Android
- 搜尋框帶有搜尋提示點選消失程式碼例項
- 如何高效利用 GitHub 關鍵字進行搜尋Github
- 電商API分享:京東按關鍵字搜尋商品API
- SQL隱碼攻擊點搜尋關鍵字SQL
- Windows10搜尋框怎麼關閉_Win10如何關閉搜尋框WindowsWin10
- vue2實現搜尋結果中的搜尋關鍵字高亮Vue
- jQuery可伸縮搜尋框程式碼例項jQuery
- Javascript中this關鍵字詳解JavaScript
- 淘寶API分享:關鍵字搜尋淘寶商品,獲取商品ID,詳情資料API
- 1688按關鍵字搜尋新品資料說明
- php替換搜尋標題關鍵字為紅色PHP
- grep搜尋伺服器日誌(搜尋指定關鍵字的行,按照日期group by count)伺服器
- ionic2/ionic3 實現搜尋結果中的搜尋關鍵字高亮