我正在使用 Jquery ui autocomplete .
我正在使用 autoFocus选项,以便一旦显示自动完成列表,就会自动选择第一个选项。
This是一个 fiddle 。自动完成代码是:
$(".ac").autocomplete({
source: availableTags,
autoFocus: true
});
但是,如果这是在 android 上的 chrome 浏览器上测试的,那么对于任何非最后一个表单输入,都不会选择该项目。
经过检查,我注意到 android 设备上表单中任何非最后一个输入元素的“输入”(键盘右下角的按钮)按钮是“下一步”,而最后一个输入元素的“输入”按钮形式是“走”。
我描述的问题仅在“输入”按钮为“下一步”时发生(即:任何非最后一个输入元素)。
关于如何解决此问题有什么建议吗?也就是说,如何让“enter”键选择 android Chrome 浏览器上的自动聚焦元素?
谢谢
最佳答案
您可以尝试通过事件回调获取/设置焦点项目。
看这个例子:
$(document).ready(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
// Add variable to hold focued item value
let focusedItem = '';
$(".ac").autocomplete({
source: availableTags,
autoFocus: true,
focus: function(event, ui) {
// on focus set the focued item value to the variable
focusedItem = ui.item.value;
return true;
},
change: function(event, ui) {
// user moved away from input, if variable is not null set it to input
if (focusedItem != '')
jQuery(this).val(focusedItem);
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<form>
<input type="text" class="ac" />
<input type="text" class="ac">
</form>
关于android - android设备上的jquery ui自动完成autoFocus,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50434447/