jQuery를 사용하여 목록을 통해 넘겨주기

Question

나는 내가 작성한 자동 완성 기능이있는 검색 상자가 있습니다. 나는 몇 가지 문제가있다.

두 가지 :

• 는이 필터에 의해 숨겨진 된 포함의 자동 완성/검색어의 목록을 아래로 arrowing 및합니다. 보이는 목록 항목 만 통과 할 수 있도록하려면 어떻게해야합니까?

• 입력 할 때 목록에서 항목 중 하나를 선택하면 해당 단어가 검색 상자의 단어와 일치하므로 드롭 다운이 계속 표시됩니다.

  FIDDLE

일부 코드 : 요점은 당신은 .filter() 호출 중 유일한 요소를 보여주고 있지만, 요소는 동일한 여전히 존재

$(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

명부. 숨겨진 요소를 넣을 숨겨진 다른 목록을 만들어야합니다. 사용자가 검색 필드를 업데이트 할 때마다 두 목록의 각 요소를 확인해야합니다. 표시해야 할 사람이 표시 목록에 표시되고 표시하지 않으려는 사람은 숨겨진 목록으로 이동합니다.

여기에 이제 모든 시간을 확인하기 위해 두 개의 목록이 예

$("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 일부 버그가있을 수 있지만 그 점을 파악해야합니다.