jQuery - 像在cPanel中搜索一樣在頁面上鍵入搜索

我正在尋找一種類似於cpanel搜索的功能。當你在搜索框中輸入內容時，類似的內容會保持不變，其餘的內容會消失。示例jQuery - 像在cPanel中搜索一樣在頁面上鍵入搜索

<div>hello</div> 
<div>world</div> 
<div>good</div> 
<div>bad</div> 
<input type="text" name="search">

現在我開始輸入「他」。只有你好顯示和div的其餘部分去顯示：無;

可能嗎？看過Cpanel搜索框的人知道我在問什麼。我一直在四處尋找，但找不到類似的東西。提前致謝。

來源

2012-06-13 John

當然很簡單，只需使用keyupevent和切換<div>的相應

jsFiddle

HTML

<div id="example"> 
    <div>hello</div> 
    <div>world</div> 
    <div>good</div> 
    <div>bad</div> 
</div> 
<input type="text" name="search" id="search">

$(function(){ 
    $('#search').keyup(function(event){ 
     var keyCode = event.which; // check which key was pressed 
     var term = $(this).val(); 
     $('#example').children().hide(); // hide all 
     $('#example').children(':Contains("' + term + '")').show(); // toggle based on term 
    }); 
}); 

$.expr[':'].Contains = function(a, i, m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

來源

2012-06-13 20:21:02 Gabe

太好了！有用。好吧，再做一些調整。它正在區分大小寫。我希望它在不區分大小寫的情況下工作，還可以在搜索框和div內的文本中忽略諸如 - /（）等字符。 – John

您可以擴展包含選擇器的功能以使其不區分大小寫。您也可以檢查哪個鍵被按下並相應地執行。更新了我的答案。請注意，如果它解決了您的問題，請不要忘記標記爲答案。 – Gabe

我一定會這樣做，但我該如何刪除區分大小寫？現在，如果我搜索任何大寫，結果是零 – John

是的，這是可能的。

這裏是我的小提琴：http://jsfiddle.net/HQFQ5/2/

這是使它工作中的作用：

$('input').bind('keyup',function(){ 
    var selfVal = $(this).val() 
    var compareDivs = $('div'); 
    compareDivs.each(function(){ 
    var divVal = $(this).text().toString(); 
    if (divVal.indexOf(selfVal)<0) 
     $(this).fadeOut(); 
    else 
     $(this).fadeIn(); 
    }); 
});

來源

2012-06-13 20:21:51 jeschafe

jQuery - 像在cPanel中搜索一樣在頁面上鍵入搜索

回答

相關問題