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

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

9 个解决方案

#1

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>

#2

This directly call search method with default value when focus.

这在焦点时直接调用具有默认值的搜索方法。

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

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

#3

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>

#4

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>

#5

$(this).trigger('keydown.autocomplete'); doesn't quite work for me.

$（本）.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
});

#6

With more recent versions you might need to change autocomplete to uiAutocomplete

对于更新的版本，您可能需要将自动填充更改为uiAutocomplete

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

#7

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 Factory。与将事件附加到元素相比，它更容易维护，更快速，更清晰。

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

    this._super();
  }
});

#8

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

#9

-1

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.

自动完成的一般目的是在按键上执行，根据我们输入的字母，它将经常执行通配符搜索并显示结果。

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所说的一样，附加到匿名函数而不是Control。

#1