Блог

Я использую typeahead.js как текстовое поле автозаполнения.

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

Как мне очистить значение текстового поля, если входное значение отсутствует в предложениях.

Я столкнулся с такой же ситуацией, и способ, которым я решил это, заключался в использовании событий typeahead.js . Я записываю выделение typeahead:select , а затем проверяю typeahead:change , был ли сделан выбор. Если выбор не был сделан, я сбрасываю ввод до исходного значения.

 // Initialize typeahead as ususal
var $myTypeahead = $("#my-typeahead");
$myTypeahead.typeahead(/* Set-up typeahead here */);

// Set up variables to store the selection and the original 
// value.
var selected      = null;
var originalVal   = null;

// When the typeahead becomes active reset these values.
$myTypeahead.on("typeahead:active", function(aEvent) {
   selected       = null;
   originalVal    = $myTypeahead.typeahead("val");
})

// When a suggestion gets selected save that
$myTypeahead.on("typeahead:select", function(aEvent, aSuggestion) {
   selected = aSuggestion;
});

// Once user leaves the component and a change was registered
// check whether or not something was selected. If not reset to
// the original value.
$myTypeahead.on("typeahead:change", function(aEvent, aSuggestion) {
   if (!selected) {
      $myTypeahead.typeahead("val", originalVal);
   }

   // Do something with the selected value here as needed...
});   
 

Если вы используете typeahead.js с вводом тегов начальной загрузки, что я настоятельно рекомендую из-за его мощности, есть опция, freeInput которую вы можете включить false, чтобы не разрешать теги, которые не возвращаются источником typeahead.

Вот пример того, как вы можете его использовать:

 $('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: false
});
 

Таким образом, ваши теги будут ограничены тем, что возвращает источник, например, Амстердам, Вашингтон, Сидней …

теперь, в 2020 году, у меня такая же проблема, я делюсь с вами своим кодом, решайте мою проблему.

После ввода typeahead у меня есть скрытый ввод для захвата идентификатора выбранного элемента.

У Typeahead есть событие с именем » render: срабатывает, когда предложения отображаются для набора данных. Обработчик события будет вызван с 4 аргументами: объект события jQuery, предложения, которые были отображены, флаг, указывающий, были ли предложения извлечены асинхронно, и имя набора данных, в котором произошел рендеринг. »

Используя это событие и проверяя значение скрытого ввода, я написал этот код:

#pais — это ввод типа.

#id_pais — это скрытый ввод.

 $('#pais').bind("typeahead:render", function(e, data, name) {
  $('#id_pais').val('');
});

$('#pais').bind("typeahead:change", function(e, data, name) {
  var valor = $('#id_pais').val();
  if (valor == '' ) {
    $('#pais').val('');
  }
});
 

извините за мой английский, я говорю по-испански.

Просто проверьте наличие кода клавиши tab при нажатии клавиш…

     $('.typeahead').typeahead(null, {
        name: 'typeahead_name',
        displayKey: 'value',
        source: typeahead_name.ttAdapter()
    }).on('keydown', function (e) {
        if( e.which == 9 ) {
            console.log('tab pressed!');
            $('.typeahead').val(''); // clear typeahead field
            return false; // prevent further action
        }
    });
 

Список ключей, которые вы можете использовать:
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Дополнительная информация о событии jQuery Keydown: https://api.jquery.com/keydown /