JQuery автозаполнения автофокус не в ногу

Question

При использовании jQueryUI AutoComplete с AutoFocus, установленным в значение true, если вы наберете слишком быстро и нажмете клавишу ввода, первый выбор заменит введенный вами текст, даже если он не совпадает.

Например, есливы набираете «app», и первым выбором автозаполнения прокрутки является «apple», а затем продолжаете быстро набирать «applique» и нажимаете ввод, «applique» заменяется на «apple».

Непосредственно перед тем, как введенный текст будет заменен на первый выбор из автозаполнения, есть ли способ убедиться, что первый выбор все еще соответствует введенному тексту?

Answer 1

Уменьшите свою задержку в опциях автозаполнения.Если вы используете локальные данные, вы можете установить задержку на 0. По умолчанию она установлена ​​на 300 (мс).Таким образом, после нажатия клавиши требуется 300 мс, прежде чем он повторно оценивает набор данных на совпадения.

Итак, в основном, ваша автофокусировка на первом элементе, и вы не дали ей возможность отфильтровать перед нажатием Enter.

В качестве альтернативы, вы можете изменить задержку среднего потока после первого автофокуса.Итак, в первый раз, когда вы ждете 300 мс, чтобы показать предложение, затем в событии фокусировки вы уменьшаете таймер до 0 мс, чтобы он быстрее фильтровал список.

Будьте осторожны, поскольку задержка 0 можетвызвать проблемы, если это удаленные данные.Примерно так может хорошо сработать:

$(".selector").autocomplete({
  delay: 300,
  focus: function () {
    $(".selector").autocomplete("option", "delay", 0);
  },
  source: sourceData
}

Answer 2

Я знаю, что опоздал, но это сводило меня с ума. Я не хотел менять свою задержку, и даже если бы я это сделал, если бы я печатал слишком быстро, это все равно стерло бы мои последние символы.

После сильной головной боли я нашел лучшее решение:)

Откройте ваш jquery-ui-1.8.20.custom.js (не могу гарантировать, что код будет работать в любой другой версии), а затем найдите следующие строки:

                blur: function( event, ui ) {
                // don't set the value of the text field if it's already correct
                // this prevents moving the cursor unnecessarily
                if ( self.menu.element.is(":visible") &&
                    ( self.element.val() !== self.term ) ) {
                    self.element.val( self.term );
                }
            }

Просто закомментируйте, что if statement вот так:

                blur: function( event, ui ) {
                // don't set the value of the text field if it's already correct
                // this prevents moving the cursor unnecessarily
                /*COMMENTING THIS IF OUT MAKES AUTOCOMPLETE STOP ERASING WHAT YOU TYPE
                if ( self.menu.element.is(":visible") &&
                    ( self.element.val() !== self.term ) ) {
                    self.element.val( self.term );
                }
                */
            }

и все будет работать нормально :)