在使用jQuery自动完成插件时,可以通过设置focus
事件来在焦点上显示所有选项。具体步骤如下:
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui"></script>
<input type="text" id="autocomplete-input">
focus
事件来显示所有选项。$(function() {
$("#autocomplete-input").autocomplete({
source: ["选项1", "选项2", "选项3", "选项4", "选项5"],
autoFocus: true,
focus: function(event, ui) {
// 在焦点上显示所有选项
event.preventDefault();
$(this).val(ui.item.label);
}
});
});
在上述代码中,source
属性指定了自动完成的选项列表,可以根据实际需求进行修改。autoFocus
属性设置为true
表示自动完成插件会在焦点上自动选择第一个匹配项。focus
事件中的回调函数会在焦点移动到某个选项时触发,通过event.preventDefault()
阻止默认行为,然后使用$(this).val(ui.item.label)
将选项的文本显示在输入框中。
推荐的腾讯云相关产品:无
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云