Как предотвратить событие выбора по умолчанию в автозаполнении JQuery - PullRequest
7 голосов
/ 04 августа 2010

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

$("#txt1").autocomplete({
    minLength: 1,
    source:  "abc.php",
    select: function(event, ui) 
    {
        event.preventDefault();
        //alert("Select");
        var label= ui.item.label;
        var value= ui.item.value;
        $('#txt1').val(ui.item.label);
    }
});

Ответы [ 3 ]

7 голосов
/ 20 июля 2013

Я знаю, что это очень старый вопрос, но я сам столкнулся с этой проблемой. Ответ для меня - поставить event.preventDefault(); в конце метода select следующим образом:

$("#txt1").autocomplete({
    minLength: 1,
    source:  "abc.php",
    select: function(event, ui) 
    {
        //alert("Select");
        var label= ui.item.label;
        var value= ui.item.value;
        $('#txt1').val(ui.item.label);
        event.preventDefault();  // <---- I moved!
    }
});

Для меня, если в начале функции поставить event.preventDefault();, событие по умолчанию не сработает, а остальная функция не будет выполнена Если он перемещен до конца, то он работает, как ожидалось. Надеюсь, это поможет кому-то еще.

0 голосов
/ 12 февраля 2017

Так что это что-то вроде хака, который работал для меня: в моем случае при выборе записи в раскрывающемся меню (либо щелчком мыши, либо с помощью клавиш со стрелками для выделения и нажатия клавиши ВВОД) я использовал value для создания URL, а затем отправляет браузер на него, но он все еще копируется в окно поиска. Ни один из ответов, которые я пробовал, не помог этому предотвратить. Чтобы не отображать value в окне поиска, я сделал value таким же, как label в моем JSON, и добавил дополнительное поле code, которое мой обработчик событий select использует для создания нужного мне URL. :

$( "#autocomplete" ).autocomplete({
  source: "http://www.example.com/search",
  minlength: 2,
  select: function( event, ui ) {
    // go to page on ENTER
    window.location.href = "/page/" + ui.item.code;
  }
});
0 голосов
/ 07 сентября 2010

с использованием этого параметра selectFirst: false

...