jQuery UI AutoComplete Select Event Не работает с помощью мыши Нажмите
У меня есть список ссылок, и у меня есть этот поиск в поле #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>
Вопрос: когда пользовательские типы, автозаполнение показывает список, а затем пользователь использует мышь, чтобы щелкнуть один из результатов. С навигацией клавиатуры содержимое поля поиска изменяется, но если пользователь нажимает один из параметров, окно поиска не модифицирована, и событие выбора немедленно срабатывает.
Как я могу сделать сценарий работать с выбором клавиатуры и выделением мыши? Как я могу дифференцироваться между выборами событиями, которые запускаются клавиатурой с теми, срабатываемыми мышью?
6 ответов
Благодаря @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
};
})
На ваш второй вопрос: «Как я могу отличить выбранные события, которые запускаются с помощью клавиатуры, от событий, запускаемых мышью?»
Объект 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();
},
...
});
Я тестировал его во всех версиях 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);
},
Была такая же проблема / проблема.
Jquery: 1.11.1 UI: 1.11.0
Вопрос: Вы используете плагин bassistance jquery validte одновременно?
Если положительный: обновите его до последней версии или просто отключите тесты.
Я обновил с 1.5.5 до 1.13.0
Помогли мне. Удачи!
Это может быть немного далеко, но у меня была похожая ситуация, когда при выборе значения автозаполнения поле ввода оставалось пустым. Ответ заключался в том, чтобы игнорировать события «изменения» (так как они были обработаны по умолчанию) и заменять их привязками к событиям «автозаполнения». Событие «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] }
У меня была та же проблема, щелчок мышью не выбирал элемент, по которому щелкнули. Мой код должен был сделать 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
})