jQuery autoComplete просмотреть все по клику?

Я не вижу очевидного способа сделать это в документах, но вы пытаетесь вызвать событие фокуса (или щелчка) в текстовом поле с включенным автозаполнением:

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

Вы можете инициировать это событие, чтобы отобразить все параметры:

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

Или посмотрите пример по ссылке ниже. Похоже, именно то, что вы хотите сделать.

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

ИЗМЕНИТЬ (от @cnanney)

Примечание. Вы должны установить minLength: 0 в автозаполнении, чтобы пустая строка поиска возвращала все элементы.

Я нашел, что это работает лучше всего

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)

Чтобы отобразить все элементы / смоделировать поведение поля со списком, вы должны сначала убедиться, что вы установили для параметра minLength значение 0 (по умолчанию 1). Затем вы можете связать событие щелчка, чтобы выполнить поиск с пустой строкой.

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

попробуй это:

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

и minLength установлено значение 0.

работает каждый раз :)

решение из: Показать список автозаполнения пользовательского интерфейса 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());
    });
});

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

Вы должны установить minLength на ноль, чтобы это работало! Вот рабочий пример.

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

это единственное, что работает для меня. Список показывается каждый раз и закрывается при выборе:

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

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

вы можете использовать это:

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

это показывает все варианты: "%" (см. ниже)

Важно то, что вы должны разместить его под предыдущим объявлением #example, как в примере ниже. Это заняло у меня некоторое время, чтобы понять.

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

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

надеюсь, это поможет кому-то:

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

Я решил это с помощью атрибута 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");
}

Я видел все ответы, которые кажутся полными.

Если вы хотите получить список, когда курсор находится в текстовом поле ИЛИ когда вы нажимаете на соответствующую метку, вот как вы можете это сделать:

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

это отлично работает в Firefox, IE, Chrome...

Я не мог заставить работать часть $("#example").autocomplete( "search", "" );, только после того, как я изменил свой поиск на символ, который существует в моем источнике, он работает. Поэтому я тогда использовал, например. $("#example").autocomplete( "search", "a" );.

Я предполагаю, что лучший вариант - поставить $("#idname").autocomplete("search", ""); в параметр onclick текстового поля. Так как при выборе фокус ставится jquery, это может быть обходным путем. Не знаю, должно ли это быть приемлемым решением.

Мне нужно было сделать это недавно, и, попробовав несколько разных перестановок (используя 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 к очень хорошему Chosen. выбирать списки с обновлением Melting Ice, когда у меня есть шанс .

Я использовал этот способ:

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

Вы также можете использовать функцию поиска без параметров:

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

Если входное значение пусто, ищите значение внутри ввода. Этот код работает для меня:

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