2012-03-01 85 views
16

我有一個文本輸入搜索應該根據div的標題過濾div。這裏是不工作的代碼:根據文本搜索顯示div

$('.contact-name').each(function(){ 
    var txt = $('#search-criteria').val(); 
    $('this').find(txt).show()  
}); 

我在做什麼錯?

編輯: 澄清變量txt是用戶在輸入字段中鍵入的內容。一個例子是,如果TXT是查我希望此行顯示:

<div class="contact-name"><h3><a href="##">Charles Smith</a></h3></div> 

回答

41

試試這個

var txt = $('#search-criteria').val(); 
$('.contact-name:contains("'+txt+'")').show(); 

documentation for :contains() Selector

小提琴例如:http://jsfiddle.net/WBvTj/2/

UPDATE CASE INSE NSITIVE:

var txt = $('#search-criteria').val(); 
$('.contact-name').each(function(){ 
    if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){ 
     $(this).show(); 
    } 
}); 

撥弄實施例:http://jsfiddle.net/WBvTj/4/

+0

查看我上面的附加解釋。我期待評估div內的文字。 – 2012-03-01 03:19:58

+0

更新了答案..檢查 – 2012-03-01 03:22:24

+0

這是主要工作,有沒有辦法使這種情況下不敏感? – 2012-03-01 03:43:18

0

幸運的是jQuery有一個Contains選擇:

$('.contact-name').each(function(){ 
    var txt = $('#search-criteria').val(); 
    $(this).find('div:contains("'+txt+'")').show()  
}); 
0

find方法接受一個jQuery選擇作爲參數。我懷疑你的search_criteria文本輸入將包含該內容。假設它將包含DIV的標題的一些字符串,然後試試這個:

var txt = $('#search-criteria').val();  
$('.contact-name').each(function(i, e){ 
    if($(e).attr("title").indexOf(txt)>=0) $(e).show(); 
}); 
0

以下只應在文本是不區分大小寫的,並且匹配在在div第一A HREF:

var pattern = "/" + $('#search-criteria').val() + "/i"; 
$('.contact-name').filter(function() { 
    return $(this 'a:first-child').html().match(pattern).length > 0; 
}).show(); 

濾波器給出你將返回true的元素列表,以便將show()應用於其中。
過濾函數中的返回值可以被讀爲:「對於此元素中的第一個錨元素,取內容,將其與該模式進行匹配,並且如果結果數組包含1個或更多結果,則返回true」。

模式結尾的「i」是什麼讓你不區分大小寫的匹配。