jQuery UI zum automatischen Vervollständigung: erzwingen Auswahl aus der Liste ohne Änderungen

Question

ich die Gewohnheit bin mit in Autocomplete combobox with Knockout JS template/JQuery

bereitgestellt Bindung Ich brauche zu erzwingen, dass der Benutzer einen Wert in der Autocomplete-Liste auswählen müssen und nachdem sie den Wert auswählen, um nicht kann zusätzlichen Text zur Auswahl hinzufügen. Ich habe gesucht, aber ich kann kein Beispiel dafür finden, wie verhindert werden kann, dass zusätzlicher Text eingegeben wird. Sie muss editierbar bleiben, wenn sie das falsche Dropdown ausgewählt haben, aber was sie tippen, muss mit einem Wert aus der Liste übereinstimmen.

Ich fand this Posting auf jquery aber seine 9 Monate alt und niemand eine Antwort geschrieben.

Answer 1

Es gibt keine eingebaute Funktion, um das zu tun, was Sie wollen.

Ich habe ein einfaches Projekt, wo die Verwendung der Autovervollständigung change Ereignis müssen Sie den Wert aus der Autovervollständigung auswählen, wenn nicht der Wert gelöscht wird.

Change-Ereignis

ausgelöst, wenn das Feld unscharf wird, wenn der Wert geändert hat.

Nach der Auswahl wurde das Feld deaktiviert und Sie können es beispielsweise mit einem aktivierenden Anker aktivieren.

Code:

$("#artist").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "http://en.wikipedia.org/w/api.php", 
      dataType: "jsonp", 
      data: { 
       'action': "opensearch", 
        'format': "json", 
        'search': request.term 
      }, 
      success: function (data) { 
       response(data[1]); 
      } 
     }); 
    }, 
    change: function (event, ui) { 
     if (ui.item == null || ui.item == undefined) { 
      $("#artist").val(""); 
      $("#artist").attr("disabled", false); 
     } else { 
      $("#artist").attr("disabled", true); 
     } 
    } 
}); 

$('#changeArtist').click(function (e) { 
    e.preventDefault(); 
    $("#artist").attr("disabled", false); 
}); 

Hier ist eine Geige: http://jsfiddle.net/IrvinDominin/nH4Nx/

Answer 2

Dies ist ein älteres Post, aber ich denke, es ist von einer UX Perspektive leicht unvollständig ist, aufgrund der Fokus Ausgabe (es funktioniert nicht machen die Änderung bis zum Fokus von der Eingabe, in diesem Fall ‚#artist‘, ziemlich ärgerlich) entfernt ist, so möchte ich hinzufügen:

select: function (event, ui) { 
     $("#artist").attr("disabled", false); 
    } 

so (nehmen wir an, es ist ein Knopf wir en sind versuchen, möglich), dass der Benutzer das aktivierte Objekt sofort bei der Auswahl sieht.