JQuery UI autocomplete select событие не работает с щелчком мыши
У меня есть список ссылок, и у меня есть это поле поиска #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>
Проблема заключается в том, когда пользователь вводит, автозаполнение показывает список, а затем пользователь использует мышь, чтобы щелкнуть один из результатов. При навигации по клавиатуре содержимое окна поиска изменяется, но если пользователь нажимает одну из опций, окно поиска не изменяется, и событие выбора немедленно запускается.
Как я могу сделать script работу с выбором клавиатуры и выбором мыши? Как я могу различать события выбора, которые запускаются клавиатурой с помощью кнопок, запускаемых мышью?
Ответы
Ответ 1
Благодаря @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
};
})
Ответ 2
К вашему второму вопросу: "Как я могу различать события выбора, которые запускаются клавиатурой с помощью кнопок, запускаемых мышью?"
Объект event
в событиях пользовательского интерфейса jQuery будет включать .originalEvent
, исходное событие, которое оно завербовало. Его можно было обернуть несколько раз, например, в случае виджета Autocomplete. Итак, вам нужно проследить дерево, чтобы получить исходный объект события, затем вы можете проверить тип события:
$("#reportname").autocomplete({
select: function(event, ui) {
var origEvent = event;
while (origEvent.originalEvent !== undefined)
origEvent = origEvent.originalEvent;
if (origEvent.type == 'keydown')
$("#reportfind").click();
},
...
});
Ответ 3
Я тестировал его во всех версиях IE (в том числе 9) и всегда получал пустой контроль ввода после того, как я выбрал элемент с помощью мыши. Это вызвало некоторые головные боли. Я даже спустился к исходному коду пользовательского интерфейса jQuery, чтобы узнать, что там происходит, но также не нашел никаких намеков.
Мы можем сделать это, установив тайм-аут, который внутренне ставит в очередь событие в 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);
},
Ответ 4
Имел ту же проблему/проблему.
JQuery: 1.11.1
UI: 1.11.0
Вопрос: Вы используете одновременный подключаемый модуль jquery validte?
Если положительный: обновите его до самой новой версии или просто отключите его для тестов.
Я обновил с 1.5.5 до 1.13.0
Помог мне. Удачи!
Ответ 5
Недавно я столкнулся с одной и той же проблемой (элементы автозаполнения не кликабельны, работа клавиатуры).
Оказалось, что в моем случае ответ был вовсе не связан с JS. Пользовательский интерфейс автозаполнения не был доступен клиенту просто потому, что ему не было соответствующего значения для свойства CSS z-index.
.ui-autocomplete {
z-index: 99999; /* adjust this value */
}
Это сделал трюк.
Ответ 6
Это может быть немного заторможенным, но у меня была аналогичная ситуация, когда выбор значения автозаполнения оставил поле ввода пустым. Ответ состоял в том, чтобы игнорировать события "изменения" (поскольку они были обработаны по умолчанию) и заменить их связями на события "autocompletechange".
Событие "change" запускается до того, как значение из автозаполнения находится в поле = > поле имеет "пустое" значение при обработке нормального события "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] }
Ответ 7
У меня возникла аналогичная проблема. Я хотел отправить форму, когда пользователь нажал на опцию. Но форма была отправлена еще до того, как значение ввода может быть установлено. Следовательно, на стороне сервера контроллер получил нулевое значение.
Я решил это, используя измененную версию ответа Уильяма Ниу.
Отметьте это сообщение - fooobar.com/questions/224596/...
Ответ 8
У меня была такая же проблема, щелчок мышью не был выбран элемент, который был нажат. Мой код должен был сделать 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
})