Autocomplete verbieten kostenlose Texteingabe?

Question

Ist es möglich, die Eingabe von freiem Text in das JQuery UI Autocomplete-Widget zu verbieten?

zB Ich möchte nur den Benutzer aus der Liste der Elemente auswählen können, die in der Autocomplete-Liste angezeigt werden, und nicht möchten, dass sie in der Lage sind, etwas zufälligen Text zu schreiben.

Ich habe nichts in den Demos/Docs gesehen, die beschreiben, wie man das macht.

http://jqueryui.com/demos/autocomplete/

Ich bin mit dem automatischen Vervollständigung wie diese

$('#selector').autocomplete({ 
    source: url, 
    minlength: 2, 
    select: function (event, ui) { 
     // etc 
    } 

Answer 1

Eine Möglichkeit wäre, eine zusätzliche Validierung einreichen auf Formular verwenden (wenn Sie ein Formular verwenden) einen Fehler zu markieren, wenn der Text nicht einer der gültigen Option.

Eine andere Möglichkeit wäre, an das Änderungsereignis der Autovervollständigung anzuhängen, das ausgelöst wird, selbst wenn keine Optionen ausgewählt sind. Sie können dann eine Validierung durchführen, um sicherzustellen, dass die Benutzereingabe in Ihrer Liste ist, oder einen Fehler anzeigen, wenn dies nicht der Fall ist.

Answer 2

Wenn Sie den Benutzer wollen aus der Liste den Eintrag, nur um dann die automatische Vervollständigung Combobox verwenden.

http://jqueryui.com/demos/autocomplete/#combobox

HTH

Answer 3

Was ist mit der Option mustMatch?

'Wenn der Wert auf' true 'gesetzt ist, werden nur Ergebnisse vom Auto-Completer angezeigt, die vom Back-End angezeigt werden. Beachten Sie, dass ungültige Werte zu einem leeren Eingabefeld führen.

Answer 4

Ich benutzte das Combobox-Modul, das Ihnen einen "Pfeil nach unten" -Button gibt. Dann zum Eingangs-Tag fügen Sie einfach das folgende zum Eingangs-Tag um die Linie 41 hinzu (abhängig von Ihrer Version der Combobox http://jqueryui.com/demos/autocomplete/#combobox)

input.attr ("readonly", "readonly");

Fügen Sie dann Code hinzu, damit der Benutzer, wenn er auf das Eingabefeld klickt, die Dropdown-Liste anzeigt.

Für meine Zwecke habe ich ein Readonly-Flag hinzugefügt, das ich in das Modul eingeben kann. Wenn ich es nur lesen muss, kann ich es auch ein-/ausschalten.

Answer 5

Alte Frage, aber hier:

var defaultVal = ''; 
    $('#selector').autocomplete({ 
     source: url, 
     minlength: 2, 
     focus: function(event, ui) { 
      if (ui != null) { 
       defaultVal = ui.item.label; 
      } 
     }, 
     close: function(event, ui) { 
      $('#searchBox').val(defaultVal); 
     } 
    }); 

Answer 6

Nach den API documentation, der change Veranstaltung ui Eigenschaft ist null, wenn der Eintrag nicht aus der Liste gewählt wurde, so dass Sie frei Text so einfach wie dies nicht zulassen können:

change: function(event,ui) 
     { 
     if (ui.item==null) 
      { 
      $("#your_input_box").val(''); 
      $("#your_input_box").focus(); 
      } 
     } 

Answer 7

Die Combobox Option funktioniert gut, wenn Sie eine Setlist verwenden, aber wenn Sie eine dynamisch generierte Liste über eine json bekommen haben, dann können Sie nur die Daten auf Änderung erfassen.

Vollständiges Beispiel mit zusätzlichen Parametern unten.

 $("#town").autocomplete(
     {  
      select: function(event, ui) { 
       $("#town").val(ui.item.value); 
       return false; 
      },   
      focus: function(event, ui) { 
        $("#town").val(ui.item.label); 
        return false; 
       },   
      change: function(event, ui) { 
       if (!ui.item) { 
        $("#town").val(""); 
       } 
      }, 
      source: function(request, response) { 
       $.ajax({ 
        url: 'urltoscript.php', 
        dataType: "json", 
        data: { 
         term : request.term, 
         country : $("#abox").val() // extra parameters 
        },       
        success: function(data) { 
         response($.map(data,function (item) 
         {         
          return { 
           id: item.id, 
           value: item.name 
          }; 
         })); 
        } 
       }); 
      }, 
      minLength: 3 
      , highlightItem: true         
     });