单击jQuery autoComplete查看全部？

Question

我以一种相对简单的方式使用jQuery的自动完成:

$(document).ready(function() {
  var data = [ {text: "Choice 1"}, 
               {text: "Choice 2"}, 
               {text: "Choice 3"} ]

$("#example").autocomplete(data, {
  matchContains: true,
  minChars: 0,
  formatItem: function(item) 
    { return item.text; }
    }
  );
  });

如何添加一个onclick事件(如按钮或链接),它将显示自动完成的所有可用选项？基本上我正在寻找自动完成和选择/下拉元素的混合.

谢谢!

Answer 1

您可以触发此事件以显示所有选项:

$("#example").autocomplete( "search", "" );

或者参见下面链接中的示例.看起来就像你想要做的.

http://jqueryui.com/demos/autocomplete/#combobox

编辑(来自@cnanney)

注意:您必须在自动完成中为空搜索字符串设置minLength:0以返回所有元素.

Answer 2

我觉得这个效果最好

var data = [
    { label: "Choice 1", value: "choice_1" },
    { label: "Choice 2", value: "choice_2" },
    { label: "Choice 3", value: "choice_3" }
];

$("#example")
.autocomplete({
    source: data,
    minLength: 0
})
.focus(function() {
    $(this).autocomplete('search', $(this).val())
});

它搜索标签并将值放入元素$(#example)

Answer 3

我无法在文档中看到明显的方法,但您尝试在启用自动填充的文本框上触发焦点(或单击)事件:

$('#myButton').click(function() {
   $('#autocomplete').trigger("focus"); //or "click", at least one should work
});

Answer 4

为了显示所有项目/模拟组合框行为,首先应确保将minLength选项设置为0(默认值为1).然后,您可以绑定click事件以使用空字符串执行搜索.

$('inputSelector').autocomplete({ minLength: 0 });
$('inputSelector').click(function() { $(this).autocomplete("search", ""); });

Answer 5

尝试这个：

    $('#autocomplete').focus(function(){
        $(this).val('');
        $(this).keydown();
    }); 

和minLength设置为0

每次都可以工作:)

Answer 6

解决方案来自：在焦点事件上显示jquery ui自动完成列表

使它多次运行的解决方案

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

Answer 7

您必须设置minLength为零才能使其工作！这是工作示例。

$( "#dropdownlist" ).autocomplete({
      source: availableTags,
      minLength: 0 
    }).focus(function() {
      $(this).autocomplete('search', $(this).val())
    });
});