显示焦点事件的jquery ui自动完成列表

这里是我的代码，有什么不对吗？ 它似乎没有显示焦点列表，我仍然必须在显示列表之前按下一个键

<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"> 

Answer 1

看起来像你将你的focus()处理程序附加到匿名函数，而不是文本框。

尝试这个：

 <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> 

Answer 2

解决scheme使其工作不止一次

 <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> 

Answer 3

这个时候直接调用search方法时默认值为focus。

http://jsfiddle.net/steelywing/ubugC/

 $("input").autocomplete({ source: ["Apple", "Boy", "Cat"], minLength: 0, }).focus(function () { $(this).autocomplete("search"); }); 

Answer 4

digitalPBK几乎有它的权利…

他的解决scheme不止一次地工作，但是当您用鼠标单击从列表中select一个项目时，不会closures下拉列表。 在这种情况下，当你点击的时候，焦点又回到了控制，所以当它closures的时候它重新打开了列表。

这里有一个修复，这是唯一的方式，我觉得它应该工作，现在使用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> 

Answer 5

$(this).trigger('keydown.autocomplete'); 对我来说不太合适

这就是我所做的：

 $('#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 }); 

Answer 6

使用更新的版本，您可能需要将自动完成更改为uiAutocomplete

 $(this).data("uiAutocomplete").search($(this).val()); 

Answer 7

如果你想改变一些关于jQuery UI的东西，那就用jQuery UI的方式吧。

利用jQuery UI Widget Factory 。 将事件附加到元素上比维护更容易，速度更快，并且更加简洁。

 $.widget('custom.autocomplete', $.ui.autocomplete, { options: { minLength: 0 }, _create: function() { this._on(this.element, { focus: function(event) { this.search(); } }); this._super(); } }); 

Answer 8

自动完成的通用目的是在按键上执行，并根据我们input的字母来执行通常的通配符search并显示结果。

无论如何，从上面的代码我可以看到：

对焦（函数（）{
$（本）.trigger（ 'keydown.autocomplete'）;

它按照Codesleuth的说法附加到匿名函数而不是Control。