jQuery UI Autocomplete: как разрешить свободный текст

Question

Я хочу дать возможность пользователю добавить свой вариант, а не только один из предложенных. Но когда я ввожу что-то в поле и нажимаю ENTER, моя форма отправляется.

Затем я попытался поймать событие keydown для своего поля, но в этом случае у меня нет возможности выбрать вариант из предложений с помощью стрелок и ввести ключи, потому что параметр ui не определен.

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

Если вы хотите, чтобы предотвратить форму от представления на ввода можно использовать preventDefault:

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

Для автозаполнения, имейте в виду, что запуская «autocompleteselect» событие, когда клавишу ввода нажимается будет дважды запускайте обработчик «autocompleteselect», когда пользователь нажимает «Enter» на предлагаемый элемент. Чтобы избежать этого и отсутствующего параметра ui, попробуйте добавить пользователей в качестве предлагаемого элемента, используя ответный ответ и установив автофокусировку в значение true.

Вот пример, когда пользовательский ввод добавляется в список предложений, когда автозаполнение не имеет совпадений.

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

Описание приведенного выше примера jsfiddle.

Надеюсь, это поможет.