雅緻的jQuery搜索欄？

Question

我有頁面頂部的搜索欄的帖子列表。有沒有辦法在用戶輸入時獲取搜索欄的內容？

我不想提交表單，但我想在不離開頁面的情況下獲取搜索欄的內容。我想我可以使用$("#txt_name").attr('value');獲取該字段的內容，但是有什麼方法可以在用戶點擊搜索框內輸入時獲取該值？

然後根據他們搜索的內容我能夠檢查<div>的ID，看看他們是否匹配。如果他們不匹配，那麼褪色出來......

Answer 1

這樣的事情應該幫助：

http://jsfiddle.net/Batfan/vWMXm/

這監聽在輸入字段上按下的[回車]鍵，並根據它們是否包含與查詢匹配的文本來隱藏/顯示元素。所有結果都顯示在空白搜索上。 看下面：

$(document).on("keypress","#searchbox",function(e){ 
    var userVal = $(this).val(); 
    if(e.which == 13) { 
     $("li").each(function() { 
      if($(this).text().match(new RegExp(userVal, "i"))) { 
       $(this).show(); 
      } else if(userVal == "") { 
       $(this).show(); 
      } else { 
       $(this).hide(); 
      } 
     }); 
    } 
    e.stopPropagation(); 
}); 

Answer 2

您可以將事件處理函數的輸入元素

var $search = $("#txt_name").on('keyup', function (e) { 
    if (e.keyCode == 13) { 
    alert($search.val()); 
    } 
})