Событие выбора автозаполнения пользовательского интерфейса jQuery не работает с щелчком мыши

Question

У меня есть список ссылок, и у меня есть это окно поиска #reportname. Когда пользователь вводит в поле поиска, автозаполнение покажет текст ссылок в списке.

<div class="inline">
<div class="span-10">
<label for="reportname">Report Name</label>
<input type="text" name="reportname" id="reportname" />
</div>
<div class="span-10 last">
<button type="button" id="reportfind">Select</button>
</div>
</div>

Пользователь может затем использовать стрелку на клавиатуре, чтобы выбрать один из текстов, и когда он нажмет ENTER, браузер перейдет по адресу ссылки. Пока все хорошо.

<script type="text/javascript">
    $(document).ready(function () {
        $("#reportname").autocomplete({
            source: $.map($("a.large"), function (a) { return a.text }),
            select: function () { $("#reportfind").click() }
        })
        $("#reportfind").click(function () {
            var reportname = $("#reportname")[0].value
            var thelinks = $('a.large:contains("' + reportname + '")').filter(
                function (i) { return (this.text === reportname) })
            window.location = thelinks[0].href
        })
    });
</script>

Проблема в том, что при вводе пользователем автозаполнение показывает список, а затем пользователь использует мышь, чтобы щелкнуть один из результатов. При использовании навигации по клавиатуре содержимое поля поиска изменяется, но если пользователь щелкает один из параметров, поле поиска не изменяется, и событие выбора запускается немедленно.

Как заставить скрипт работать с выбором клавиатуры и мышью? Как я могу различить выбранные события, которые запускаются с помощью клавиатуры, и события, запускаемые с помощью мыши?

Answer 1

На ваш второй вопрос: «Как я могу отличить выбранные события, которые запускаются с помощью клавиатуры, от событий, запускаемых мышью?»

Объект event в событиях пользовательского интерфейса jQuery будет содержать .originalEvent, оригинальное событие оно обернуло.Это могло быть несколько раз обернуто, например, в случае виджета автозаполнения.Итак, вам нужно проследить дерево, чтобы получить исходный объект события, затем вы можете проверить тип события:

$("#reportname").autocomplete({
    select: function(event, ui) {
        var origEvent = event;
        while (origEvent.originalEvent !== undefined)
            origEvent = origEvent.originalEvent;
        if (origEvent.type == 'keydown')
            $("#reportfind").click();
    },
    ...
});

Answer 2

Благодаря @William Niu и firebug я обнаружил, что параметр события select 'ui' содержит полное выбранное значение: ui.item.value.Таким образом, вместо того, чтобы в зависимости от пользовательского интерфейса jquery изменять текст текстового поля, чего не было, если пользователь щелкает мышью, я просто выбираю выбранное значение из 'ui':

$("#reportname").autocomplete({
    select: function (event, ui) {
        var reportname = ui.item.value
        var thelinks = $('a.large:contains("' + reportname + '")').filter(
            function (i) { return (this.text === reportname) })
        window.location = thelinks[0].href
    };
})

Answer 3

Я тестировал его во всех версиях IE (включая 9) и всегда получал пустой элемент управления вводом после выбора элемента с помощью мыши. Это вызвало некоторые головные боли. Я даже спустился к исходному коду jQuery UI, чтобы посмотреть, что там происходит, но также не нашел никаких подсказок.

Мы можем сделать это, установив тайм-аут, который внутренне ставит в очередь событие в javascript-движке IE. Поскольку гарантируется, что это событие времени ожидания будет поставлено в очередь после события фокуса (это уже было инициировано ранее самим IE).

select: function (event, ui) {
    var label = ui.item.label;
    var value = ui.item.value;
    $this = $(this);
    setTimeout(function () {
        $('#txtBoxRole').val(value);
    }, 1);
},

Answer 4

Была такая же проблема / проблема.

Jquery: 1.11.1 UI: 1.11.0

Вопрос: Вы используете плагин bassistance jquery validte одновременно?

Еслиположительный: обновите его до последней версии или просто отключите для тестов.

Я обновил с 1.5.5 до 1.13.0

Помогли мне.Удачи!

Answer 5

Недавно я столкнулся с точно такой же проблемой (элементы автозаполнения не активируются, события клавиатуры работают).

Оказалось, что в моем случае ответ не был связан с JS.Пользовательский интерфейс автозаполнения нельзя было щелкнуть просто потому, что в нем отсутствовало соответствующее значение для свойства CSS z-index.

.ui-autocomplete {
    z-index: 99999; /* adjust this value */
}

Это помогло.

Answer 6

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

Предыдущий код: щелчок мышью не работает.

 select: function(event, ui) {
          event.preventDefault();
          for(i= 0; i< customer.length; i++)
          if(document.getElementById('inputBox').value == customer[i].name)
          {

          $.ajax({
          call
          })

Изменен код: щелчок мышью работает

select: function(event, ui) {
          // event.preventDefault();
          for(i= 0; i< customer.length; i++)
          // if(document.getElementById('inputBox').value == customer[i].fields.name)
          if(ui.item.value == customer[i].name)
          {
          $.ajax({
          call
          })

Answer 7

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

Я решил это, используя модифицированную версию ответа Уильяма Ниу.

Проверить это сообщение - https://stackoverflow.com/a/19781850/1565521

Answer 8

Это может быть немного резко, но у меня была похожая ситуация, когда при выборе значения автозаполнения поле ввода оставалось пустым. Ответ заключался в том, чтобы игнорировать события «изменения» (так как они были обработаны по умолчанию) и заменять их привязками к событиям «автозаполнения». Событие «change» запускается до того, как значение из autocomplete окажется в поле => поле имело «пустое» значение при обработке обычного события «change».

// ignore the "change" event for the field
var item = $("#"+id); // JQuery for getting the element
item.bind("autocompletechange", function(event, ui) { [call your handler function here] }