La sélection d'un Élément de Liste (capture/bas flèche vers le haut)

J'ai suivantes structure HTML ("ul li" sont rendus sous forme de liste déroulante/sélectionner)

<input id="input_city" type="text" />

<div class="suggestions">
 <ul>
  <li value="0" name="New York">New York</li>
  <li value="1" name="London">London</li>
  <li value="2" name="Paris">Paris</li>
  <li value="3" name="Sydney">Sydney</li>
 </ul>
</div>

Besoin de JavaScript/jQuery code de la capture vers le bas la flèche de la conférence de presse (à l'entrée) qui sélectionnera le premier 'li' élément

Consécutives vers le bas touche de sélection à côté 'li' éléments; et la touche haut, sélectionnez previous 'li' éléments.

InformationsquelleAutor I-M-JM | 2012-07-09
  1. 19

    Étant donné que votre question est un peu trop vague, ce n'est pas exactement clair ce que vous essayez d'accomplir.

    Si vous essayez de mettre en évidence la li éléments, utilisez ceci:

    var $listItems = $('li');

$('input').keydown(function(e)
{
    var key = e.keyCode,
        $selected = $listItems.filter('.selected'),
        $current;

    if ( key != 40 && key != 38 ) return;

    $listItems.removeClass('selected');

    if ( key == 40 ) //Down key
    {
        if ( ! $selected.length || $selected.is(':last-child') ) {
            $current = $listItems.eq(0);
        }
        else {
            $current = $selected.next();
        }
    }
    else if ( key == 38 ) //Up key
    {
        if ( ! $selected.length || $selected.is(':first-child') ) {
            $current = $listItems.last();
        }
        else {
            $current = $selected.prev();
        }
    }

    $current.addClass('selected');
});​

    Voici le violon: http://jsfiddle.net/GSKpT/

    Si vous êtes juste essayer de définir la valeur de votre input champ, modifier la dernière ligne de ce:

    $(this).val ( $current.addClass('selected').text() );

    Voici le violon: http://jsfiddle.net/GSKpT/1/

    • Pas sûr au sujet de la question, mais cette réponse, c'est ce que je cherchais 🙂
    • Salut, et comment voulez-vous pousser la liste en haut et en bas si c'est dans un débordement div conteneur?
    InformationsquelleAutor Joseph Silber
  2. 0

    Vous pouvez utiliser MousetrapJS pour cela. Voici un exemple de comment vous pourriez mettre en œuvre la touche bas.
    D'abord ajouter la classe sélectionnée pour le premier élément de la liste.

    Mousetrap.bind('down', function() {
    var next = $(".suggestions  li.selected").removeClass("selected").next();
    if (next.length) {
       next.addClass("selected");
    } else {
       $(".suggestions li").first().addClass("selected");
    }
});
    • if(next) retournera toujours true, utilisez if(next.length !== 0) à la place.
    InformationsquelleAutor Split Your Infinity