jQuery-ui 自动完成,选择第一项
Posted
技术标签:
【中文标题】jQuery-ui 自动完成,选择第一项【英文标题】:jQuery-ui autocomplete, select first item 【发布时间】:2017-08-06 11:22:52 【问题描述】:我在我的 rails 应用程序中使用 jQuery-ui 自动完成功能。当我输入一些输入时,我希望它自动选择自动完成框中的第一项。我应该如何实现这个?
jQuery(function()
return $('#transaction_receiver_name').autocomplete(
source: $('#transaction_receiver_name').data('autocomplete-source')
);
);
我的 CSS
.ui-helper-hidden-accessible
display: none;
ul.ui-autocomplete
position: absolute;
list-style: none;
margin: 0;
padding: 0;
border: solid 1px #999;
cursor: default;
li
background-color: #FFF;
color: black;
border-top: solid 1px #DDD;
margin: 0;
padding: 0;
a
color: #000;
display: block;
padding: 3px;
a.ui-state-hover, a.ui-state-active
background-color: #FFFCB2;
Input field
【问题讨论】:
为什么不利用open
回调来完成这个。
【参考方案1】:
您只需添加autoFocus: true
,它会自动选择列表中显示的第一个元素。
jQuery(function()
return $('#transaction_receiver_name').autocomplete(
source: $('#transaction_receiver_name').data('autocomplete-source'),
autoFocus: true
);
);
这是一个例子:
$(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"
];
$("#tags").autocomplete(
source: availableTags,
autoFocus: true,
focus: function(event, ui)
event.preventDefault();
//Here you can add anycode you want to be executed when an item of the box is selected
,
select: function(event, ui)
event.preventDefault();
//Code here will be executed when an item is clicked on
);
);
/* this will change the style of the selected element of the box*/
.ui-autocomplete .ui-menu-item .ui-state-active
color: blue;
background: red;
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="tags">
【讨论】:
不确定是否正确:如果设置为true
,则显示菜单时第一项将自动聚焦。 这会将焦点设置在第一项上,但不会选择它并关闭菜单。
@Chiller 这个想法对我来说很好,除了focus
部分。这是因为$(this).autocomplete("close");
在看到任何内容之前就关闭了该框,而$(this).val(ui.item.key);
删除了文本字段中的值
@EgonMeijers 你想让它只关注盒子的第一项还是你需要它来做其他事情?
@Chiller 添加了菜单框的图片,标题说明了一切
@Chiller 回答您的问题【参考方案2】:
当菜单打开时,您可以收集第一个列表项并将其用作值。例如:
jQuery(function()
return $('#transaction_receiver_name').autocomplete(
source: $('#transaction_receiver_name').data('autocomplete-source'),
open: function(e, ui)
var first = $(".ui-menu-item:eq(0) div").html();
$(this).val(first);
return false;
);
);
这是未经测试的。
另一种方法是触发点击第一个元素。
jQuery(function()
return $('#transaction_receiver_name').autocomplete(
source: $('#transaction_receiver_name').data('autocomplete-source'),
open: function(e, ui)
$(".ui-menu-item:eq(0)").trigger("click");
return false;
);
);
【讨论】:
第一种方法会在输入第一个字母时立即添加列表中的第一项,如果您删除了例如中途的单词,它将再次自动完成。第二种方法不显示项目列表。它只会像第一个方法一样添加列表中的第一项。 如果项目列表已经可见,第二种方法适用于我。以上是关于jQuery-ui 自动完成,选择第一项的主要内容,如果未能解决你的问题,请参考以下文章