자동 제안 상자에 화살표 키 기능 추가

Question

내 자동 제안 상자에서 화살표 키를 만드는 방법을 알 수 없습니다. 이 코드를 내 코드에 추가해야한다는 것을 알고 있습니다.

var keynum = 0; 
    if(window.event) { keynum = e.keyCode; } // IE 
    else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera 
    if(keynum === 38) { // up 
    //Move selection up 
    } 
    if(keynum === 40) { // down 
    //Move selection down 
    } 
    if(keynum === 13) { // enter 
    //Act on current selection 
    } 

그러나 내 코드에는 어떻게 맞는지 잘 모르겠습니다. 누군가 내 코드와 함께 어떻게 될지 알아낼 수 있습니까? 아래쪽 화살표를 누르면 위쪽 화살표를 누르면 강조 표시된 결과가 아래쪽으로 이동합니다. Heres 내 코드 :

</ul> 

<div class="input-wrapper"> 
<input type="text" class="autosuggest" value="Type in a city or town" onblur="onBlur (this)" onfocus="onFocus(this)" > <input type="submit" value="Search"> 

<div class="dropdown"> 
    <ul class="result"></ul> 


</div> 
</div> 

     $(document).ready(function() { 
$('.autosuggest').keyup(function() { 
var search_term = $(this).attr('value'); 

$.post('php/search.php', { search_term: search_term }, function(data) { 
    $('.result').html(data); 

$('.result li').click(function(){ 
    var result_value = $(this).text(); 
    $('.autosuggest').attr('value', result_value); 
    $('.result').html(''); 

    }); 

    }); 

}); 
     }); 
     function onBlur(el) { 
if (el.value == '') { 
    el.value = el.defaultValue; 
} 
} 
function onFocus(el) { 
if (el.value == el.defaultValue) { 
    el.value = ''; 
} 
} 

Answer 1

이미 jQuery를 사용하고있는 것으로 나타났습니다. 가능한 경우, jquery-ui 라이브러리는 이미 원하는 키보드 기능을 제공합니다. ajax 데이터 소스 포함. 'j'를 jQuery-ui 데모 here에 입력하고 화살표 키를 사용하십시오. 그런 다음 설명서를 참조하여 아약스 게시물을 가져 오십시오.

예 JS

$(function(){ 
    $(".autosuggest").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url: "/php/searchToJSON.php", 
        dataType: "json", 
        data: { 
         search_term: request.term 
        }, 
        success: function(data) { 
//this maps your serverside /searchToJSON.php to the {label:something, value:somethingElseMaybe} that jquery-ui autocomplete needs 
         response($.map(data.SomeNameYouPick, function(itemWithinSomeNameYouPick) { 
          return { 
           label: itemWithinSomeNameYouPick.labelToShowForOneItem, 
           value: itemWithinSomeNameYouPick.valueWhenSelectedForOneItem 
          } 
         })); 
        } 
       }); 
      }, 
      minLength: 2 
    }); 
});