JQuery autoComplete просмотреть все на клике?

Ответ 1

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

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

Ответ 2

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

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

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

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

ИЗМЕНИТЬ (из @cnanney)

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

Ответ 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())
});

Он ищет метки и помещает значение в элемент $(# example)

Ответ 4

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

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

Ответ 5

из Отобразить список автозаполнения 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());
    });
});

Ответ 6

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

Ответ 7

попробуйте следующее:

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

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

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

Ответ 8

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

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

Ответ 9

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

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

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

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

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 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 in the box
        })

Ответ 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/

Ответ 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" );.

Ответ 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 спискам выбора с помощью Обновление плавильного льда, когда я получаю шанс.

Ответ 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", "");