我正在学习如何实现自动建议框,但我只是不知道如何使用箭头键和输入按钮使结果可访问。我真的不知道我会怎么做。我已经有了它,所以当我单击该框时,结果将移动到输入字段,但现在我想使用箭头键使结果可访问,并且当您单击 Enter 时,它将将该项目移动到输入字段。这是我的代码:
<div class="input-wrapper">
<input type="text" class="autosuggest" value="Type in a city or town" onblur="onBlur(this)" onfocus="onFocus(this)" > <input type="submit" value="Search">
<div class="dropdown">
<ul class="result"></ul>
</div>
</div>
和脚本:
$(document).ready(function() {
$('.autosuggest').keyup(function() {
var search_term = $(this).attr('value');
$.post('php/search.php', { search_term: search_term }, function(data) {
$('.result').html(data);
$('.result li').click(function(){
var result_value = $(this).text();
$('.autosuggest').attr('value', result_value);
$('.result').html('');
});
});
});
});
function onBlur(el) {
if (el.value == '') {
el.value = el.defaultValue;
}
}
function onFocus(el) {
if (el.value == el.defaultValue) {
el.value = '';
}
}