jQuery UI Autocomplete: wie man freien Text erlaubt

Question

Ich möchte Möglichkeit für Benutzer geben, um seine eigene Variante hinzuzufügen, nicht nur eine von vorgeschlagen. Aber wenn ich etwas in das Feld eintippe und auf ENTER klicke, wird mein Formular übermittelt.

Dann habe ich versucht, Keydown-Ereignis für mein Feld zu fangen, aber in diesem Fall verliere ich die Möglichkeit, eine Variante aus Vorschlägen mit Pfeilen und geben Sie die Tasten, weil ui Parameter nicht definiert ist.

$('#field_id').on('keydown', function(event) { 
     if (event.keyCode == $.ui.keyCode.ENTER 
      || event.keyCode == $.ui.keyCode.NUMPAD_ENTER) 
     { 

      $('#field_id').trigger('autocompleteselect'); 
     } 
    }); 

    $('#field_id').autocomplete({ 
     source: [{"id":"20","value":"This is not mandatory decline reason"},{"id":"21","value":"You are have to be rejected"}] 
     minLength: 0 
    }).on('autocompleteselect', function(event, ui) { 
     // if I click on suggestion using mouse - everything is ok 
     // but not for ENTER-key choosing 

     // I want something like that: 
     if (ui.item) { 
       id = ui.item.id; 
       value = ui.item.value; 
     } else { 
       id = 'my_new_item'; 
       value = $(this).val(); 
     } 
     return false; 
    }); 

Answer 1

Wenn Sie geben Sie das Formular von der Abgabe verhindern möchten, können Sie prevent verwenden:

$(document).ready(function() { 
    $(window).keydown(function(event){ 
    if(event.keyCode == 13) { 
     event.preventDefault(); 
     return false; 
    } 
    }); 
}); 

Für die zur automatischen Vervollständigung, bewusst sein, dass die Auslösung der ‚autocompleteselect‘ Ereignis, wenn die Enter-Taste gedrückt wird, feuern Sie den Handover-Befehl 'autocomplete select' zweimal, wenn ein Benutzer auf einen vorgeschlagenen Eintrag eingibt. Um dies und den fehlenden ui-Parameter zu vermeiden, versuchen Sie, die Benutzereingabe als Vorschlag hinzuzufügen, indem Sie den Antwort-Callback verwenden und den Autofokus auf true setzen.

Hier ist ein Beispiel, in dem die Benutzereingabe zur Liste der Vorschläge hinzugefügt wird, wenn die automatische Vervollständigung keine Übereinstimmungen aufweist.

$('#field_id').autocomplete({ 
    source: [{ 
     "id": "20", 
      "value": "This is not mandatory decline reason" 
    }, { 
     "id": "21", 
      "value": "You are have to be rejected" 
    }], 
    minLength: 0, 
    autoFocus: true, 
    response: function (event, ui) { 

     if (ui.content.length == 0) { 
      ui.content.push({ 
       label: "New Search value: " + $(this).val(), 
       value: $(this).val(), 
       id: 0 
      }); 
     } 
    } 
}).on('autocompleteselect', function (event, ui) { 
    id = ui.item.id; 
    value = ui.item.value; 

    return false; 
}); 

Hier ist ein jsfiddle Beispiel für die oben genannten.

Hoffe, das hilft.