優雅的jquery搜索欄？

Question

我在頁面上有帖子列表，頁面頂部帶有搜索欄。 當用戶按下Enter鍵時，是否有辦法獲取搜索欄的內容？

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

然后根據他們搜索的內容，我可以檢查<div> id並查看它們是否匹配。 如果它們不匹配，則將它們淡出...

Answer 1

您可以將事件處理函數附加到輸入元素

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

Answer 2

這樣的事情應該有所幫助：

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

這偵聽要在輸入字段上按下的[enter]鍵，並根據是否包含與查詢匹配的文本來隱藏/顯示元素。 所有結果均顯示在空白搜索中。 見下文 ：

$(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();
});