У меня есть список ссылок, и у меня есть это поле поиска #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 работу с выбором клавиатуры и выбором мыши? Как я могу различать события выбора, которые запускаются клавиатурой с помощью кнопок, запускаемых мышью?
