JQuery UI自动完成 - 当用户在文本框中单击时,打开菜单

时间:2011-12-06 14:44:52

标签: javascript jquery jquery-ui autocomplete jquery-autocomplete

我正在使用此JQuery autocomplete widget

当用户点击文本框时,如何让它自动打开菜单?我希望用户看到所有选项。

4 个答案:

答案 0 :(得分:21)

您需要手动触发search事件,并将窗口小部件上的minLength选项设置为零:

$("input").autocomplete({
    minLength: 0,
    /* other options */
}).on("focus", function () {
    $(this).autocomplete("search", "");
});

工作示例: http://jsfiddle.net/9JmVu/

答案 1 :(得分:1)

我想我实际上得到了它。如果将minLength设置为0,然后触发搜索“”,则会打开菜单。

      $(inputSelector).autocomplete(
              {
                  source: this.validConstructCodes,
                  minLength: 0,
                  autoFocus: true,
                  autoSelect: true
              });
      $(inputSelector).focus(function(event) {
        $(this).autocomplete( "search" , "" );
      });

答案 2 :(得分:1)

正如安德鲁所解释的,你需要触发事件。

但是一旦你从ajax请求得到结果,最好再次显示结果,而不是再次询问服务器。 minLength值是独立的,可以是服务器请求中建议的2。

$("input").autocomplete({
    minLength: 2,
    /* your options */
}).on("focus", function () {
    /* the element with the search results */
    var uid = $("#ui-id-"+$(this).autocomplete("instance").uuid);

    if(uid.html().length == 0) {
        /* same as $(this).autocomplete("search", this.value); */
        $(this).keydown();
    }
    else {
        uid.show();
    }
});

答案 3 :(得分:0)

@amalesh答案的细微更改可与jQuery Autocomplete v1.8一起使用。 我在uuid中添加了+1,因为它从0开始,但id设置为1。

$("input").autocomplete({
        minLength: 2,
        /* your options */
}).on("focus", function () {
        /* the element with the search results */
        //
        let uid = $("#ui-id-" + ($(this).autocomplete("instance").uuid + 1));
        if(uid.html().length === 0) {
            /* same as $(this).autocomplete("search", this.value); */
            $(this).keydown();
        }
        else {
            uid.show();
        }
    });