HTML <select>: Fokus-Option basierend auf Benutzereingabe?

Question

Ich habe ein HTML-select-Element:

<select id='poetslist'> 
    <option value="shakespeare">William Shakespeare</option> 
    <option value="milton">John Milton</option> 
    <option value="keats">John Keats</option> 
    <option value="wordsworth">William Wordsworth</option> 
    <option value="larkin">Phillip Larkin</option> 
</select> 

In Chrome, wenn die Seite geladen, die William Shakespeare Option ausgewählt ist. Wenn der Benutzer beginnt, "Phil" einzugeben, richtet sich die Liste auf Phillip Larkin. Vertrautes Verhalten.

Was würde ich tun (vorzugsweise mit jQuery) ist auch erlauben dem Benutzer die Initialen des Dichters und haben die entsprechende Option in den Fokus kommen einzugeben. Wenn Sie JK eingegeben haben, sollte die Option John Keats in den Fokus kommen. JM und John Milton usw.

Ich weiß nicht einmal, wie das HTML-Select-Element funktioniert, ob es in verschiedenen Browsern anders ist - und es scheint schwierig zu sein, eine gute Dokumentation dafür zu finden.

Kann jemand einen klugen Weg finden, dies in jQuery zu tun?

Answer 1

ist eine Komplettlösung:

1. In jeder Option Attribute, wie @JMC vermuten lässt. Allerdings würde ich den Attributnamen mit "data" voranstellen, um mit HTML5 standards übereinzustimmen. jQuery (ab v1.4.3) unterstützt auch das Abrufen von Attributen, die mit "data" beginnen, unter Verwendung von .data().
2. Bindung an das Tastendruckereignis. Dies ist aus folgenden Gründen korrekter als die Tastenbelegung:
   1. Semantisch bedeutet der Tastendruck, dass eine Benutzereingabe erfolgt ist, während die Tasteneingabe bedeutet, dass der physische Schlüssel aufgehoben wird. Wenn Sie beispielsweise eine Taste gedrückt halten, werden mehrere Tastendruckereignisse (für jedes Zeichen, das auf dem Bildschirm angezeigt wird) generiert, während nur ein Tastenereignis auftritt. Keypress neigt auch nicht dazu, die Reihenfolge von Tastendrücken falsch zu empfangen, wenn der Benutzer schnell "QW" eintippt, sondern die "W" -Taste (eine Tastenkombination) vor der "Q" -Taste anhebt.
   2. Die Tastenkombination wird bei Nicht-Zeichen-Tasten wie den Pfeilen, der Rücktaste usw. generiert, während die Tastenkombination nicht gedrückt wird.
3. Verwenden Sie einen Timer, um zwischen zwei isolierten Tastendrücken und einer einzelnen Tastenfolge zu unterscheiden, z. hat der Benutzer gemeint "W" für William Shakespeare und dann "P" für Phillip Larkin, oder einfach nur "WP" für ... Was auch immer Poet.

HTML

<select id="poetslist"> 
    <option value="shakespeare" data-initial="WS">William Shakespeare</option> 
    <option value="milton" data-initial="JM">John Milton</option> 
    <option value="keats" data-initial="JK">John Keats</option> 
    <option value="wordsworth" data-initial="WW">William Wordsworth</option> 
    <option value="larkin" data-initial="PL">Phillip Larkin</option> 
</select> 

Javascript

var timer = null, initials = ""; 

$("#poetslist").keypress(function (e) { 
    initials += String.fromCharCode(e.which).toUpperCase(); 

    // Look for option with initials beginning with the typed chars 
    $(this).find("option").filter(function() { 
     return $(this).data("initial").toUpperCase().indexOf(initials) === 0; 
    }).first().attr("selected", true); 

    // Set/reset timer 
    if (timer) { 
     clearTimeout(timer); 
     timer = null; 
    } 
    timer = setTimeout(function() { 
     timer = null; 
     initials = ""; 
    }, 2000); // Max 2 second pause allowed between key presses 

    return false; 
}); 

Answer 2

Die grundlegende Magie, die Sie brauchen, ist die Eigenschaft "ausgewählt" auf einer der Optionen zu setzen. Gib jedem einen Ausweis. Dann verwenden Sie

Siehe auch this SO question.

Nun, für das Auswahlverhalten müssen Sie wahrscheinlich die key pressed events abfangen und Ihre eigene Logik machen. Der schwierigste Teil ist wahrscheinlich herauszufinden, was man für seltsame Fälle tun sollte, wie zum Beispiel, wenn jemand "JKM" - Keats oder Milton - eintippt?

Answer 3

Mit @ Charlie Antwort im Sinn, wenn Sie den Zugriff auf den HTML in erster Linie zu bauen, könnte es am einfachsten, ein zusätzliches Attribut der Option Element hinzuzufügen, wie

<option init="WW" value="wordsworth">William Wordsworth</option> 
<option init="PL" value="larkin">Phillip Larkin</opt 

Wenn Sie können‘ t dies auf dem Server-Ende, könnte jQuery leicht ein zusätzliches Attribut zu einer Option basierend auf seinem Wert einfügen. Vorausgesetzt natürlich, dass Sie im Voraus alle Werte kennen, die Sie dort haben werden.

Nachdem das zusätzliche Attribut in die Option aufgenommen wurde, würde es nur darum gehen, diese Werte auf der Tastatur des Suchfelds zu überprüfen. Hier