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

72

我正在相对简单的方式中使用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事件(例如按钮或链接)来显示自动完成的所有可用选项?基本上,我想要制作一个自动完成和选择/下拉元素的混合体。

谢谢!

22个回答

2

这是我唯一有效的方法。列表每次都会显示,并在选择后关闭:

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

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

2
希望这能帮助到某些人:
$('#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
        })

2

你可以使用这个:

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

1

我使用了属性minChars:0,然后触发两次点击来解决这个问题。(自动完成在输入框上单击一次后显示)我的代码

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

1

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

如果您想在光标位于文本字段中或单击匹配标签时获取列表,以下是您可以执行的操作:

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

这在Firefox、IE、Chrome等浏览器中都可以正常工作...


1
$("#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
        });

0
我使用了这种方式:
$("#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");

0

最近我需要做这个,尝试了几种不同的排列组合(使用文本框的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>

这将在输入框聚焦时打开自动完成的下拉列表(即使您的输入框中有默认文本,就像上面的例子一样)。

它还会自动选择文本框中的文本,以防止用户不得不清除文本。

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

我计划通过在适当时候添加动态Ajax调用非常好的Chosen选择列表和Melting Ice升级来替换它。


0

您也可以使用没有参数的搜索功能:

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

0

我无法让 $("#example").autocomplete( "search", "" ); 部分工作,只有当我使用源中存在的字符更改搜索时才能正常工作。因此,我使用了例如 $("#example").autocomplete( "search", "a" );


您可能需要将minChars设置为0。 - Spongeboy
如果您执行以下操作:$("#example").autocomplete( "search", " " );,它是否有效? - Youssef

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接