JQuery Autocomplete: Wie erzwinge Auswahl aus der Liste (Tastatur)

Question

Ich benutze JQuery UI Autocomplete. Alles funktioniert wie erwartet, aber wenn ich mit den Auf-/Ab-Tasten auf der Tastatur fahre, bemerke ich, dass das Textfeld wie erwartet mit Elementen in der Liste gefüllt ist, aber wenn ich das Ende der Liste erreiche und den Abwärtspfeil noch einmal drücke Zeit, der ursprüngliche Begriff, den ich eingegeben habe, zeigt, dass der Benutzer im Grunde diesen Eintrag einreichen kann.

Meine Frage: Gibt es eine einfache Möglichkeit, die Auswahl auf die Elemente in der Liste zu beschränken, und entfernen Sie den Text in der Eingabe aus der Tastaturauswahl?

zB: wenn ich eine Liste habe, die {'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'} enthält, wenn der Benutzer 'app' eintippt, wähle ich automatisch das erste Element in der Liste ('Äpfel (AA)') hier, aber wenn der Benutzer die Taste drückt Pfeil, "app" erscheint wieder in der Textbox. Wie kann ich das verhindern?

Danke.

Answer 1

"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."

reference

Auf Fokus Veranstaltung:

focus: function(e, ui) { 
    return false; 
} 

Answer 2

für Kraft Auswahl können Sie "change" event von automatischen Vervollständigung verwenden

 var availableTags = [ 
      "ActionScript", 
      "AppleScript" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags, 
      change: function (event, ui) { 
       if(!ui.item){ 
        //http://api.jqueryui.com/autocomplete/#event-change - 
        // The item selected from the menu, if any. Otherwise the property is null 
        //so clear the item for force selection 
        $("#tags").val(""); 
       } 

      } 

     }); 

Answer 3

Beide anderen Antworten in Kamm Ination arbeiten gut.

Sie können auch das event.target verwenden, um den Text zu löschen. Dies hilft beim Hinzufügen der automatischen Vervollständigung zu mehreren Steuerelementen oder wenn Sie den Selektor nicht zweimal eingeben möchten (Wartbarkeitsprobleme dort).

$(".category").autocomplete({ 
    source: availableTags, 
    change: function (event, ui) { 
     if(!ui.item){ 
      $(event.target).val(""); 
     } 
    }, 
    focus: function (event, ui) { 
     return false; 
    } 
}); 

Es sollte jedoch beachtet werden, dass das, obwohl der „Focus“ false zurück, die Auf-/Ab-Taste immer noch den Wert aus. Durch das Abbrechen dieses Ereignisses wird nur der Text ersetzt. Also, "j", "down", "tab" wird immer noch das erste Element auswählen, das "j" entspricht. Es wird nur nicht in der Steuerung angezeigt.

Answer 4

definieren eine Variable

var inFocus = false; 

Fügen Sie die folgenden Ereignisse auf Ihre Eingabe

.on('focus', function() { 
    inFocus = true; 
}) 
.on('blur', function() { 
    inFocus = false; 
}) 

Und fügen Sie eine keydown Ereignis an das Fenster

$(window) 
    .keydown(function(e){ 
     if(e.keyCode == 13 && inFocus) { 
      e.preventDefault(); 
     } 
    });