Aggiunta di funzionalità del tasto freccia alla scatola di autosuggest

Question

Non posso capire come far funzionare i tasti freccia per la mia scatola autosuggest.So che devo aggiungere qualcosa del genere al mio codice:

    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 
    } 

.

Ma non ho idea di come adattare questo con il mio codice.Qualcuno può aiutarmi a capire come sarebbe andato con il mio codice.Quando premo la freccia giù Voglio il risultato evidenziato per spostarlo verso l'alto e verso l'alto quando viene premuto la freccia su.Ecco il mio codice:

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

Ho notato che stai già usando jquery.Se possibile, la libreria JQuery-UI offre già la funzionalità della tastiera che desideri.Compreso il DataSource Ajax.Digita 'j' nella demo jquery-ui qui e usa i tasti freccia.Quindi guarda la documentazione per tirare il tuo post Ajax.

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

.