使用jQuery通過列表箭頭

Question

我有一個搜索框，它具有我已經構建的自動完成功能。我有幾個問題。

兩件事情：

• 當通過自動完成/搜索術語，它包括那些由過濾器隱藏列表arrowing上下。我如何確保只有可見列表項可以遍歷？

• 當我按Enter鍵從列表中選擇一個項目時，下拉列表仍然存在，因爲它與搜索框中的單詞匹配。

FIDDLE

某些代碼：

$(document).ready(function() { 
    $("#dropdown").hide(); 
    $("input").keyup(function() { 
     if (this.value.length) { 
      var that = this; 
      $("#dropdown li").hide().filter(function() { 
       return $(this).html().toLowerCase().indexOf(that.value.toLowerCase()) !== -1; 
      }).show(); 
      $("#dropdown").show(); 
     } 
     else { 
      $("#dropdown").hide(); 
     } 
    }); 

    $('li').click(function() { 
     $('#search').val($(this).text()); 
     $("#dropdown").hide(); 
    }); 

    var li = $('li'); 
    var liSelected; 

    $('input').keydown(function(e) { 
     if(e.which === 40) { 
      if(liSelected) { 
       liSelected.removeClass('selected'); 
       next = liSelected.next(); 
       if(next.length > 0) { 
        liSelected = next.addClass('selected'); 
        $('#search').val(liSelected.text()); 
       } 
       else { 
        liSelected = li.eq(0).addClass('selected'); 
       } 
      } 
      else { 
       liSelected = li.eq(0).addClass('selected'); 
      } 
     } 
     else if(e.which === 38) { 
      if(liSelected) { 
       liSelected.removeClass('selected'); 
       next = liSelected.prev(); 

       if(next.length > 0) { 
        liSelected = next.addClass('selected'); 
       } 
       else { 
        liSelected = li.last().addClass('selected'); 
       } 
      } 
      else { 
       liSelected = li.last().addClass('selected'); 
      } 
     } 
     else if(e.which === 13) { 
      $('#search').val(liSelected.text()); 
      $("#dropdown").hide() 
      $('#search').blur(); 
     } 
    }); 
}); 

Answer 1

的點被你僅示出元件出.filter（）調用，但元素仍然存在於相同的名單。您需要創建另一個隱藏的列表，在其中放置隱藏的元素。用戶每次更新搜索字段時，都必須檢查兩個列表中的每個元素：需要顯示的元素將顯示在可見列表中，不想顯示的列表將顯示在隱藏列表中。

下面是一個例子

$("input").keyup(function(e) { 
    if (this.value.length) { 
     var that = this; 
     $("#dropdown li").each(function() { 

      if ($(this).html().toLowerCase().indexOf(that.value.toLowerCase()) == -1) 
       $(this).appendTo($hidden); 
     }); 
     $('#hidden li').each(function() { 
      if ($(this).html().toLowerCase().indexOf(that.value.toLowerCase()) !== -1) 
       $(this).appendTo('#list'); 
     }); 
     $("#dropdown").show(); 
    } 
    else { 
     $("#dropdown").hide(); 
    } 
    if (e.which !== 40 && e.which !== 38) 
    { 
     $('#dropdown li,#hidden li').each(function() { 
      $(this).removeClass('selected'); 
     }); 
     liSelected = null; 
    }            
}); 

你現在有兩個列表來檢查每一個時間。現在就像你之前做的那樣緩存李的結果是不可能的，因爲他們的數量和位置在不斷變化。

Here I changed your code to show you what I mean，可能有一些錯誤，但你應該明白。