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事件（如按钮或链接），将显示所有的自动完成可用的选择？基本上我寻找使自动完成的混合和选择/下拉元件。

谢谢！

Answer 1

我看不到一个明显的方式做到这一点的文档，但你尝试触发焦点（或点击）事件上自动完成启用文本框：

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

Answer 2

您可以触发这个事件显示所有的选项：

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

或参见下面的链接的例子。看起来你想要做什么。

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

修改（来自@cnanney）

注：空搜索字符串返回所有元素0您自动完成

：必须设置的minLength。

Answer 3

我发现这个工作最好

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

它搜索标签和值放置到元件$（＃示例）

Answer 4

为了显示所有项目/模拟组合框的行为，应首先确保您拥有的minLength选项（默认为1）设置为0。然后，你可以单击事件绑定到执行与空字符串搜索。

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

Answer 5

溶液从：显示jQuery用户界面自动完成列表上集中事件

该溶液，使其工作不止一次

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

尝试这样：

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

和的minLength 设置为 0

屡试不爽：）

Answer 7

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

Answer 8

您必须设置minLength为零为了使这项工作！下面是工作示例。

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

Answer 9

这是对我的作品的唯一的事。列表显示每次和关闭时的选择：

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

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

Answer 10

可以使用这样的：

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

Answer 11

此示出了所有的选项："%"（见下文）

重要的是，你必须把它前面的＃示例声明之下，像下面的例子。这花了我一段时间才能找出。

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

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

Answer 12

希望这可以帮助别人：

$('#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
        })

Answer 13

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

Answer 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");
}

Answer 15

我看到所有这似乎是完整的答案。

如果你想获得列表当光标在文本字段或当您单击匹配的标签，在这里你可以怎么做：

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

这个工作正常在Firefox，IE，铬...

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

Answer 17

我不能在$("#example").autocomplete( "search", "" );部分得到的要努力，只有一次我改变我的搜索与存在于我的源代码它的工作角色。所以，我当时用例如$("#example").autocomplete( "search", "a" );。

Answer 18

我想一个更好的选择是把$（ “＃idname”）自动完成（ “搜索”， “”）;在文本框中的onclick参数中。 由于选择上，重点放在的jQuery，这可能是一个解决办法。 不知道是否它应该是可接受的解决方案。

Answer 19

我需要最近和尝试一些不同的排列组合后进行此操作（使用的onfocus，文本框等的onclick），我在这终于尘埃落定......

 <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替换它调用了非常好的的选上的的选择列表的的融冰的当我升级得到机会。

Answer 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");

Answer 21

您也可以使用搜索功能，而不参数：

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