Question

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

<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

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

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

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

Answer 2

使其不止一次起作用的解决方案

<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

看起来您正在将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 4

digitalPBK差不多......

他的解决方案不止一次工作，但是当您通过鼠标单击从列表中选择项目时，不会关闭下拉列表。在这种情况下，焦点会在您执行单击时返回到控件，因此在应该关闭它时会重新打开列表。

这是一个修复程序，它是唯一适用于我的方式，我认为它应该在使用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

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

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

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

，如Codesleuth所说，附加到匿名函数而不是Control。

Answer 9

这是正确的工作方式。

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

    this._super();
  }
});

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

9 个答案: