Autosuggest select by Arrow Keys

Question

Я новичок в jQuery и строил окно для автоматического предложения для моего сайта. Я использовал следующий HTML:

<input type="text" name="suggest" class="autosuggest1"> 
<div class="dropdown"> 
    <ul class="result1"> 
    </ul> 
</div> 

я добавил элементы в уль список на ходу с помощью следующего кода JQuery: -

$(document).ready(function() { 
    $('.autosuggest1').keyup(function() { 
     var search_term = $(this).val(); 
     $.post("search.php", { 
       search_term: search_term 
      }, function (data) { 
       $('.result1').html(data); 
       $('.result1 li').click(function() { 
        var result = $(this).text(); 
        $('.autosuggest1').val(result); 
        $('.result1').html(''); 
       }); 
      }); 
    }); 
}); 

Моя проблема заключается в том, что элемент выбран только, нажав на него и Я хочу, чтобы он также выбирался клавишами со стрелками на клавиатуре. Я не могу понять, как это сделать.

Answer 1

Почему бы вам не использовать jQuery UI's autocomplete? Причины, почему вы должны это выбрать:

• Он поставляется со всеми функциональными возможностями, которые вам когда-либо понадобятся. В вашем случае вам нужно контролировать результаты, как с помощью вашей клавиатуры, которая уже существует.
• Пожалуйста, не изобретайте колесо повторно. Autocomplete находится в разработке уже много лет, и вы будете тратить свое время, перестраивая этот виджет с нуля.

Вы бы инициализировать автозаполнения на текстовом поле, как это:

$("#city").autocomplete(options) 

Вот демо: http://jsfiddle.net/hungerpain/FqqxY/

тип любое название города и проверить для себя :)

Answer 2

Я определенно согласитесь с ответом @passionateCoders, используя автозаполнение, но если вы должны сделать это так, как вы просили, тогда эта скрипка должна помочь (адаптирована из SO answer к аналогичному вопросу).

JSFiddle

<input type="text" name="suggest" class="autosuggest1"> 
<div class="dropdown"> 
    <ul class="result1">   
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 
</div> 

<script> 
var chosen = ""; 
$(document).keydown(function(e){ // 38-up, 40-down 
    if (e.keyCode == 40) { 
    if(chosen === "") { 
     chosen = 0; 
    } else if((chosen+1) < $('li').length) { 
     chosen++; 
    } 
    $('li').removeClass('selected'); 
    $('li:eq('+chosen+')').addClass('selected'); 
    var result = $('li:eq('+chosen+')').text(); 
    $('.autosuggest1').val(result); 
    return false; 
} 
if (e.keyCode == 38) { 
    if(chosen === "") { 
     chosen = 0; 
    } else if(chosen > 0) { 
     chosen--;    
    } 
    $('li').removeClass('selected'); 
    $('li:eq('+chosen+')').addClass('selected'); 
    var result = $('li:eq('+chosen+')').text(); 
    $('.autosuggest1').val(result); 
    return false; 
} 
}); 
</script> 

Answer 3

Это старый пост. Однако я счел это полезным сейчас для меня, так как мое требование такое же, как ваше.

Ответ от progrock хорошо работает. Единственный дополнительный элемент, который вам нужно добавить, - это дескриптор функции keyup, чтобы явно обрабатывать события со стрелкой клавиш клавиатуры. Не уверен, что вы уже добавили его.

$('.autosuggest1').keyup(function() { 
    if (e.keyCode == 40 || e.keyCode == 38) {return false;} 
    ... 
}); 

Публикуется здесь, чтобы другие пользователи могли использовать их, если они столкнулись с одной и той же проблемой.