我有一个自动完成的表单，它开始搜索"onfocus"，并在用户点击进入搜索字段时显示选项列表，即使他们没有输入任何内容。
问题是自动完成需要使用键盘选择选项(向下箭头后跟tab/return或双击)。我的第一个想法是，一个单一的点击导致焦点留在搜索字段，因此自动补全保持可见。然而，在第二次点击后，搜索字段仍然集中，但在第二次点击后自动完成消失。
任何想法?
<script>
$(document).ready(function() {
var autocomplete_focus = function(){
if ($(this).val().length == 0) {
$(this).autocomplete("search", "%");
}
}
$( ".autocomplete" ).autocomplete({
source: "../../db/autocomplete_list.php",
minLength: 0
});
$( ".autocomplete" ).focus(autocomplete_focus);
});
</script>
我意识到一个类似的问题已经张贴在这里之前;然而，建议的解决方案对我不起作用。
不确定这是否是一个可接受的解决方案，但是这样做的一种方法是用焦点值填充input。这可以防止菜单显示两次:
/* snip: */
focus: function (event, ui) {
this.value = ui.item.value;
},
这是一个例子: http://jsfiddle.net/wxQf7/
尝试删除focus事件处理程序以查看问题中的症状。
此方法:
$( ".autocomplete" ).autocomplete({
source: "../../db/autocomplete_list.php",
minLength: 0
}).focus(function(){
$(this).trigger('keydown.autocomplete');
});
适合我。
源:显示焦点事件的jquery ui自动完成列表
试试这个。这段代码实际上删除了keydown。自动完成有问题。相反，它会在您每次关注文本字段时进行搜索。
$( ".autocomplete" ).autocomplete({
source: "../../db/autocomplete_list.php",
minLength: 0
}).focus(function(){
$(this).data("autocomplete").search($(this).val());
}
但是，如果您希望下拉菜单在选择条目时立即消失，则添加这一行
$( ".autocomplete" ).autocomplete({
source: "../../db/autocomplete_list.php",
minLength: 0
}).focus(function(){
**if ($(this).autocomplete("widget").is(":visible"))
return;**
$(this).data("autocomplete").search($(this).val());
}
当控件在鼠标单击的情况下接收回焦点时，如果下拉列表已经显示，则它不会执行显示全部焦点。这就是这段代码的作用