[英]jQuery-ui autocomplete, select first item
I use jQuery-ui autocomplete in my rails application. 我在Rails应用程序中使用jQuery-ui自动完成功能。 When I type some input I want it to automatically select the first item in the autocomplete box.
当我输入一些输入内容时,我希望它自动选择“自动完成”框中的第一项。 How should I implement this?
我应该如何实施呢?
jQuery(function() {
return $('#transaction_receiver_name').autocomplete({
source: $('#transaction_receiver_name').data('autocomplete-source')
});
});
My css 我的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;
}
}
}
You just need to add autoFocus: true
and it will automatically select the first element that shows in the list. 您只需要添加
autoFocus: true
,它将自动选择列表中显示的第一个元素。
jQuery(function() {
return $('#transaction_receiver_name').autocomplete({
source: $('#transaction_receiver_name').data('autocomplete-source'),
autoFocus: true
}
});
});
Here is an example: 这是一个例子:
$(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">
When the menu opens, you could collect the first list item and use that as the value. 菜单打开时,您可以收集第一个列表项并将其用作值。 For example:
例如:
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;
}
});
});
This is untested. 这是未经测试的。
Another method is to trigger click on the first element. 另一种方法是触发单击第一个元素。
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;
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.