Question

I cant figure out how to make the arrow keys work for my autosuggest box. I know I need to add something like this to my code:

    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 
    } 

But I have no idea how to fit that in with my code. Can someone help me figure out how this would go with my code. when i press the down arrow i want the highlighted result to move down one and up when the up arrow is pressed. Heres my code:

   </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

I noticed you’re already using jQuery. If possible, the jquery-ui library already provides the keyboard functionality you want. Including the ajax datasource. type ‘j’ into the jQuery-ui demo here and use you’re arrow keys. Then look at the documentation to pull in your ajax post.

example 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
  });
});