Autosuggest select by Arrow Keys

Question

I am a newbie on jQuery and was building an auto-suggest box for my website. I used the following HTML:

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

I have added elements to ul list on the go by the following jQuery code:-

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

My problem is that the element is selected only by clicking it and I want it to get also selected by arrow keys on keyboard. I can't figure how.

score 0 · Answer 1 · answered Jun 09 '13 at 17:42

Why don't you use jQuery UI's autocomplete? Reasons why you should choose this :

It comes with all the functionality you will ever need. In your case, you need to control the results like with your keyboard, which already exists.
Please don't re-invent the wheel. Autocomplete has been in development for many years and you'd be wasting your time by re-building that widget from scratch.

You'd initialize autocomplete on a text box like this :

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

Here's a demo : http://jsfiddle.net/hungerpain/FqqxY/

Type any city name and check for yourself :)

score 0 · Answer 2 · edited May 23 '17 at 12:15

I definitely agree with @passionateCoders answer using autocomplete, but if you must do it the way you asked then this Fiddle should help (adapted from the SO answer to a similar question).

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>

i tried this in ul instead of li , but the background color disappears immediately — user1851420, Jun 27 '14 at 08:53

score 0 · Answer 3 · edited Dec 10 '15 at 05:16

This is an old post. However I found it helpful now for me since my requirement is the same as yours.

The answer from progrock works well. The only additional item you may have to add is a handle in the keyup function to explicitly handle the Keyboard arrow key events. Not sure if you already have added it.

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

Posting this here so that it might be helpful for others to use, if they face the same issue.

Autosuggest select by Arrow Keys

3 Answers3