在焦点事件上显示 jquery ui 自动完成列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4132058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display jquery ui auto-complete list on focus event
提问by Aman
here is my code, anything wrong with it ? it doesn't seem to display list on focus, i still have to press a key before it displays list
这是我的代码，有什么问题吗？它似乎没有在焦点上显示列表，我仍然需要按一个键才能显示列表
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#id').autocomplete({
source: ["ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
],
minLength: 0
});
}).focus(function(){
$(this).trigger('keydown.autocomplete');
});
</script>
<input type="text" id="id">
回答by Steely Wing
This directly call search method with default value when focus.
这在焦点时直接调用默认值的搜索方法。
http://jsfiddle.net/steelywing/ubugC/
http://jsfiddle.net/steelywing/ubugC/
$("input").autocomplete({
source: ["Apple", "Boy", "Cat"],
minLength: 0,
}).focus(function () {
$(this).autocomplete("search");
});
回答by digitalPBK
The solution to make it work more than once
使其不止一次工作的解决方案
<script type="text/javascript">
$(function() {
$('#id').autocomplete({
source: ["ActionScript",
/* ... */
],
minLength: 0
}).focus(function(){
//Use the below line instead of triggering keydown
$(this).data("autocomplete").search($(this).val());
});
});
</script>
回答by Codesleuth
Looks like you are attaching your focus()handler to the anonymous function and not the text box.
看起来您将focus()处理程序附加到匿名函数而不是文本框。
Try this:
尝试这个：
<script type="text/javascript">
$(function() {
$('#id').autocomplete({
source: ["ActionScript",
/* ... */
],
minLength: 0
}).focus(function(){
// The following works only once.
// $(this).trigger('keydown.autocomplete');
// As suggested by digitalPBK, works multiple times
// $(this).data("autocomplete").search($(this).val());
// As noted by Jonny in his answer, with newer versions use uiAutocomplete
$(this).data("uiAutocomplete").search($(this).val());
});
});
</script>
回答by C.List
digitalPBK almost has it right...
digitalPBK几乎是对的......
His solution works more than once but doesn't close the drop list when you select an item from the list with a mouse-click. In that case, the focus goes back to the control when you do the click, so it re-opens the list when it should be closing it.
他的解决方案不止一次起作用，但当您通过单击鼠标从列表中选择一个项目时不会关闭下拉列表。在这种情况下，当您单击时焦点会回到控件上，因此它会在应该关闭列表时重新打开它。
Here's a fix, and it's the only that works for me the way I think it should work when using the latest version right now (1.8.11) of the autocomplete() function. When the control receives the focus, it doesn't do the display-all-on-focus if the drop-list is already shown...
这是一个修复程序，它是唯一对我有用的方法，我认为它在使用 autocomplete() 函数的最新版本 (1.8.11) 时应该起作用。当控件收到焦点时，如果下拉列表已经显示，它不会执行全焦点显示...
<script type="text/javascript">
$(function() {
$('#id').autocomplete({
source: ["ActionScript",
/* ... */
],
minLength: 0
}).focus(function () {
if ($(this).autocomplete("widget").is(":visible")) {
return;
}
$(this).data("autocomplete").search($(this).val());
});
</script>
回答by Ji_in_coding
$(this).trigger('keydown.autocomplete');doesn't quite work for me.
$(this).trigger('keydown.autocomplete');不太适合我。
This is what I did:
这就是我所做的：
$('#id').on( "focus", function( event, ui ) {
$(this).trigger(jQuery.Event("keydown"));
// Since I know keydown opens the menu, might as well fire a keydown event to the element
});
回答by Jonny
With more recent versions you might need to change autocomplete to uiAutocomplete
对于更新的版本，您可能需要将 autocomplete 更改为 uiAutocomplete
$(this).data("uiAutocomplete").search($(this).val());
回答by rgtk
If you want to change something about jQuery UI, do it jQuery UI way.
如果您想更改有关 jQuery UI 的某些内容，请使用 jQuery UI 方式。
Utilize jQuery UI Widget Factory. It's easier to maintain, faster, and much cleaner than attaching events to element.
使用 jQuery UI小部件工厂。与将事件附加到元素相比，它更易于维护、更快且更简洁。
$.widget('custom.autocomplete', $.ui.autocomplete, {
options: {
minLength: 0
},
_create: function() {
this._on(this.element, {
focus: function(event) {
this.search();
}
});
this._super();
}
});
回答by NewBle
This working right way.
这是正确的工作方式。
$.widget('custom.autocomplete', $.ui.autocomplete, {
options: {
minLength: 0
},
_create: function() {
this._on(this.element, {
focus: function(event) {
this.search();
}
});
this._super();
}
});
回答by Siva Gopal
The generic purpose of AutoComplete is to execute on key press and based on the Letter we type it will perform often a wild-card search and show the result.
AutoComplete 的通用目的是在按键时执行，并根据我们键入的字母执行通配符搜索并显示结果。
Anyway, from the code above i can see that :
无论如何，从上面的代码我可以看到：
focus(function(){
$(this).trigger('keydown.autocomplete');
focus(function(){
$(this).trigger('keydown.autocomplete');
which is attached as told by Codesleuth, to the anonymous function instead of the Control.
按照 Codesleuth 的说法，它附加到匿名函数而不是控件。
