Completamento dell'interfaccia utente jQuery: come consentire il testo libero

Question

Desidero dare all'utente la possibilità di aggiungere la propria variante, non solo quella suggerita. Ma quando digito qualcosa nel campo e clic su INVIO il mio modulo invia.

Quindi ho tentato di catturare l'evento keydown per il mio campo, ma in questo caso ho perso la possibilità di selezionare una variante dai suggerimenti utilizzando le frecce e immettere i tasti perché il parametro ui non è definito.

$('#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

Se si vuole evitare che il modulo di presentare su entra si può usare preventDefault:

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

Per il completamento automatico, essere consapevoli che attivando l'evento 'autocompleteselect' quando il tasto viene premuto ENTER attiva il gestore "autocompleteselect" due volte quando un utente preme Invio su un oggetto suggerito. Per evitare questo e il parametro ui mancante, prova ad aggiungere gli input degli utenti come voce suggerita usando la richiamata della risposta e impostando l'autofocus su true.

Ecco un esempio in cui l'input degli utenti viene aggiunto all'elenco dei suggerimenti quando il completamento automatico non ha corrispondenze.

$('#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; 
}); 

Ecco un esempio di jsfiddle di cui sopra.

Spero che questo aiuti.