jQuery autoComplete 查看全部点击？答案

【问题标题】：jQuery autoComplete view all on click?jQuery autoComplete 查看全部点击？
【发布时间】：2010-11-19 02:31:56
【问题描述】：

我正在以一种相对简单的方式使用 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 事件（如按钮或链接）？基本上，我希望混合使用自动完成和选择/下拉元素。

谢谢！

【问题讨论】：

标签： jquery autocomplete jquery-autocomplete

【解决方案1】：

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

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

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

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

编辑（来自@cnanney）

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

【讨论】：

这非常有效！我做了一点改动，在我的输入元素上放了 onfocus="javascript:$(this).autocomplete('search','');" 。感谢您的帮助！
对我来说效果很好。您必须在自动完成中设置 minLength: 0 以获取空搜索字符串以返回所有元素。我的设置为 1，花了一点时间才弄清楚为什么不起作用。
很高兴它成功了！感谢您的澄清，cnanney！我当时没有考虑到这一点。
这是正确答案。如果有 .show() 选项就好了！
刚刚得到了我想要的......很棒的解决方案。 @cnanney 也解决了最后一个问题。

【解决方案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)

【讨论】：

我最喜欢这个答案，因为如果您使用 Tab 在输入之间切换焦点，很明显文本输入具有可用的自动完成功能。有些人不使用鼠标单击所有内容；）
这太棒了！对于所有难以使其正常工作的人，minLength: 0 参数似乎对于使其正常工作至关重要！ ;)

【解决方案3】：

我在文档中看不到明显的方法，但您尝试在启用自动完成的文本框上触发焦点（或单击）事件：

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

【讨论】：

请参阅下面 Tom Pietrosanti 的回答，了解如何在不使用触发器或按钮的情况下执行此操作。
见下面克雷格的回答。

【解决方案4】：

为了显示所有项目/模拟组合框行为，您首先应确保已将 minLength 选项设置为 0（默认为 1）。然后就可以绑定click事件，用空字符串进行搜索了。

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

【讨论】：

【解决方案5】：

试试这个：

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

和 minLength 设置为 0

每次都有效:)

【讨论】：

【解决方案6】：

解决方案来自：Display jquery ui auto-complete list on focus event

让它工作不止一次的解决方案

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

您必须将minLength设置为零才能使这项工作正常进行！这是工作示例。

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

【讨论】：

【解决方案9】：

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

【讨论】：

我试过了，第一次效果很好，但是在文本框聚焦然后没有聚焦之后，如果我第二次返回它，它不再显示自动完成列表，直到我刷新页面，此时它将再次只工作一次。
$(".auto_complete").focus(function() { $(this).trigger("keydown") }) -> 这行得通！

【解决方案10】：

这是唯一对我有用的东西。列表每次显示并在选择时关闭：

$("#example")
.autocomplete(...)
.focus(function()
{
  var self = this;

  window.setTimeout(function()
  {
    if (self.value.length == 0)
      $(self).autocomplete('search', '');
  });
})

【讨论】：

【解决方案11】：

你可以用这个：

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

【讨论】：

【解决方案12】：

这显示了所有选项："%"（见下文）

重要的是您必须将它放在前面的#example 声明下方，如下例所示。我花了一段时间才弄明白。

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

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

【讨论】：

【解决方案13】：

希望这对某人有所帮助：

$('#id')
        .autocomplete({
            source: hints_array,
            minLength: 0, //how many chars to start search for
            position: { my: "left bottom", at: "left top", collision: "flip" } // so that it automatically flips the autocomplete above the input if at the bottom
            })
        .focus(function() {
        $(this).autocomplete('search', $(this).val()) //auto trigger the search with whatever's in the box
        })

【讨论】：

【解决方案14】：

我解决了这个问题属性 minChars:0 及之后，触发两次点击。（1次点击输入后自动完成显示）我的代码

<input type='text' onfocus='setAutocomplete(this)'>

function setAutocomplete(el){
    $(el).unbind().autocomplete("./index.php", {autoFill:false, minChars:0, matchContains:true, max:20});
    $(el).trigger("click");$(el).trigger("click");
}

【讨论】：

【解决方案15】：

我已经看到了所有似乎完整的答案。

如果您想在光标位于文本字段中或单击匹配标签时获取列表，请执行以下操作：

//YourDataArray = ["foo","bar"];
$( "#YourID" ).autocomplete({
            source: YourDataArray 
        }).click(function() { $(this).autocomplete("search", " "); });

这在 Firefox、IE、Chrome 中运行良好 ...

【讨论】：

【解决方案16】：

$("#searchPkgKeyWord").autocomplete("searchURL",
        {
            width: 298,
            max: 1000,
            selectFirst: false
        }).result(function (event, row, formatted) {
            callback(row[1]);
        }).focus(function(){
            $(this).click(); //once the input focus, all the research will show
        });

【讨论】：

【解决方案17】：

我无法让$("#example").autocomplete( "search", "" ); 部分工作，只有在我使用源中存在的字符更改搜索后它才能工作。所以我然后使用例如$("#example").autocomplete( "search", "a" );.

【讨论】：

您可能需要将 minChars 设置为 0。
如果你这样做是否有效：$("#example").autocomplete("search", ""); ?

【解决方案18】：

我想一个更好的选择是把 $("#idname").autocomplete("search", "");进入文本框的 onclick 参数。由于在选择时，jquery 将焦点放在了焦点上，这可能是一种解决方法。不知道这是否应该是一个可接受的解决方案。

【讨论】：

【解决方案19】：

我最近需要这样做，在尝试了几种不同的排列方式（使用 onfocus、onclick of textbox 等）之后，我终于决定了……

 <input id="autocomplete" name="autocomplete" type="text" 
 value="Choose Document">

 <p>
 <button type="submit" value="Submit" name="submit" id="submit" >
  Submit
 </button>
 </p>

<script type="text/javascript">

$("#autocomplete").autocomplete(
{
source: '@Url.Content("~/Document/DocumentTypeAutoComplete/")' //<--ddl source
, minLength: 0 // <-- This is necessary to get the search going on blank input
, delay: 0
, select: function (event, ui) 
  {
  if (ui.item) {
     $("#autocomplete").val(ui.item.value);//<-- Place selection in the textbox
          $("docForm").submit(); 
          loadDocTypeCreatePartial(ui.item);
          $("#submit").focus(); //This stops the drop down list from reopening 
                                // after an item in the select box is chosen
                                // You can place the focus anywhere you'd like,
                                // I just chose my *submit* button
                }
   }
  }).focus(function () {
    // following line will autoselect textbox text
    // making it easier for the user to overwrite whats in the 
    // textbox
    $(this).select();

    //The below line triggers the search function on an empty string
    $(this).data("autocomplete").search('');
   });
 </script>

这会在焦点上打开自动完成 ddl 列表（即使您的输入框中有默认文本，就像我在上面所做的那样）。

它还会自动选择文本框中的文本，以防止用户必须清除文本。

一旦从自动完成列表中选择了一个项目，它就会将该项目放入自动完成输入框中，并将焦点移动到另一个控件（从而防止自动完成重新打开）。

我计划在有机会时将动态 Ajax 调用添加到非常好的 Chosen 选择列表中并使用 Melting Ice 升级来替换它。

【讨论】：

【解决方案20】：

我是这样用的：

$("#autocomplete").autocomplete({
                source: YourDataArray,
                minLength: 0,
                delay: 0
            });

然后

OnClientClick="Suggest(this); return false;"/>

 function Suggest(control) {
                var acControl = $("#" + control.id).siblings(".ui-autocomplete-input");
                var val = acControl.val();
                acControl.focus();
                acControl.autocomplete("search");

【讨论】：

【解决方案21】：

你也可以使用不带参数的搜索功能：

jQuery("#id").autocomplete("search", "");

【讨论】：

【解决方案22】：

当输入值为空时搜索输入中的值。此代码适用于我：

$("#your_input").on('focus', function () {
   $(this).autocomplete('search', $(this).val() == '' ? " " : $(this).val());    
});

【讨论】：