jQuery自动完成点击查看全部？

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事件（例如按钮或链接）来显示自动完成的所有可用选项？基本上，我想要制作一个自动完成和选择/下拉元素的混合体。

谢谢！

- Rio

Answer 1

你可以触发此事件以显示所有选项：

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

或者查看以下链接中的示例。看起来正是您想要做的。

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

编辑（来自@cnanney）

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

- Tom Pietrosanti

---

这个方法完美地解决了问题！我稍微改了一下，在我的输入元素上加了 onfocus="javascript:$(this).autocomplete('search','');"。感谢你的帮助！ - eidylon

对我非常有效。您必须将自动完成中的 minLength: 0 设置为空搜索字符串返回所有元素。我的设置为1，花了一点时间才弄清楚为什么不起作用。 - cnanney

这是正确的答案。不过如果有一个.show()选项就更好了！ - Josh M.

我已将@cnanney的评论添加到解决方案中，以增加其可见性。 - Tom Pietrosanti

这篇答案真的帮我解决了大麻烦！！我试着花了几个小时去搞清楚为什么有时候 autocomplete("search","") 无法显示所有结果。 - chanp

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)中。

- Craig

---

我最喜欢这个答案，因为如果你使用 <key>Tab</key> 在输入框之间切换焦点，就会清楚地发现文本输入框有自动完成功能。一些人并不会一直用鼠标点击 ;) - styfle

太好了！对于那些在使用中遇到困难的人来说，minLength: 0 参数似乎是使其正常工作的关键！;) - Andreas

Answer 3

我在文档中没有看到明显的方法来实现，但你可以尝试触发启用了自动完成的文本框的焦点（或点击）事件：

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

- karim79

---

请查看Tom Pietrosanti的答案，了解如何在不使用触发器或按钮的情况下完成此操作。 - njfife

请参考下面的Craig的答案。 - Baz Guvenkaya

Answer 4

为了展示所有项目/模拟下拉框行为，您应该首先确保将 minLength 选项设置为0（默认值为1）。然后，您可以绑定 click 事件以执行一个空字符串的搜索。

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

- Russell Horwood

Answer 5

试一下这个：

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

当minLength设置为0时，每次都能正常工作 :)

- Cobaltus

Answer 6

为使此功能正常工作，您必须将minLength设置为零！以下是可行的示例。

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

- Brane

Answer 7

解决方案来自：在焦点事件上显示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());
    });
});

- SUF

Answer 8

<input type="text" name="q" id="q" placeholder="Selecciona..."/>


<script type="text/javascript">
//Mostrar el autocompletado con el evento focus
//Duda o comentario: http://WilzonMB.com
$(function () {
    var availableTags = [
        "MongoDB",
        "ExpressJS",
        "Angular",
        "NodeJS",
        "JavaScript",                
        "jQuery",
        "jQuery UI",
        "PHP",
        "Zend Framework",
        "JSON",
        "MySQL",
        "PostgreSQL",
        "SQL Server",
        "Oracle",
        "Informix",
        "Java",
        "Visual basic",
        "Yii",
        "Technology",
        "WilzonMB.com"
    ];
    $("#q").autocomplete({
        source: availableTags,
        minLength: 0
    }).focus(function(){            
       $(this).autocomplete('search', $(this).val())
     });
});
</script>

http://jsfiddle.net/wimarbueno/6zz8euqe/

- Wilzon

Answer 9

 $j(".auto_complete").focus(function() { $j(this).keydown(); })

- Tom

---

我尝试了这个，第一次使用时它很好用，但是在文本框被聚焦和失焦后，如果我第二次回到它，它就不再显示自动完成列表，直到我刷新页面，然后它又只能再次工作一次。 - eidylon

$(".auto_complete").focus(function() { $(this).trigger("keydown") }) -> 这个可行！ - ariel

Answer 10

这里展示了所有选项："%" （见下文）。

重要的是，你必须将其放在之前的 #example 声明下面，就像下面的例子一样。这让我花了一些时间才弄清楚。

$( "#example" ).autocomplete({
            source: "countries.php",
            minLength: 1,
            selectFirst: true
});

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

- Sebastian