Auswahl-Liste-Element (erfassen nach unten/Pfeil nach oben)

Habe ich folgende HTML-Struktur ('ul li' gerendert werden als Dropdown/select)

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

Müssen JavaScript/jQuery-code zu erfassen, nach unten-Taste drücken-Ereignis (bei der Eingabe) wählen Sie zuerst 'li' - element

Aufeinander folgende down-Taste select next 'li' - Elemente und-auf-Taste wählen Sie den vorherigen 'li' - Elemente.

was meinst du mit auswählen li-element?
Was haben Sie versucht?
Zeigen Sie uns, was Sie versucht haben und Aussehen, die diese Frage beantwortet haben: stackoverflow.com/questions/8902787/...

InformationsquelleAutor I-M-JM | 2012-07-09

  1. 18

    Da Ihre Frage ist ein wenig zu vage, es ist nicht genau klar, was du versuchst zu erreichen.

    Wenn Sie versucht, um die li Elemente, verwenden Sie diese:

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

    Hier das fiddle: http://jsfiddle.net/GSKpT/

    Wenn Sie nur versuchen, um den Wert Ihrer input Feld, ändern Sie die Letzte Zeile:

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

    Hier das fiddle: http://jsfiddle.net/GSKpT/1/

    Nicht sicher über die Frage, aber diese Antwort ist das, was ich gesucht habe 🙂
    Hi, und wie Sie schieben die Liste hoch und runter, wenn es zu einem überlauf div-container?

    InformationsquelleAutor Joseph Silber

  2. 0

    Können Sie MousetrapJS. Hier ein Beispiel, wie könnte man implementieren Sie die nach-unten-Taste.
    Fügen Sie zunächst der Klasse ausgewählt, um den ersten Punkt der 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) immer wieder true verwenden if(next.length !== 0) statt.

    InformationsquelleAutor Split Your Infinity

Schreibe einen Kommentar