jQuery автозаполнение просмотреть все по щелчку мыши?

Я использую автозаполнение 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 (например, кнопку или ссылку), которое отобразит все доступные варианты автозаполнения? В основном я хочу сделать гибрид автозаполнения и элемента select/dropdown.



спасибо!

858   20  

20 ответов:

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

$('#myButton').click(function() {
   $('#autocomplete').trigger("focus"); //or "click", at least one should work
});
14  
2009-08-12 23:33:02

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

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

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

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

EDIT (от @cnanney)

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

93  
2013-01-16 16:31:49

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

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)

33  
2012-09-13 02:50:08

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

$('inputSelector').autocomplete({ minLength: 0 });
$('inputSelector').click(function() { $(this).autocomplete("search", ""); });
5  
2012-05-17 17:20:59

решение: дисплей 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());
    });
});

4  
2017-05-23 14:54:50

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

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

и minLength значение 0

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

3  
2011-04-06 01:15:52 
 $j(".auto_complete").focus(function() { $j(this).keydown(); })
3  
2011-09-18 09:00:49

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

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

  window.setTimeout(function()
  {
    if (self.value.length == 0)
      $(self).autocomplete('search', '');
  });
})
2  
2011-07-21 07:39:54

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

$("#example").autocomplete( "search",  $("#input").val() );
2  
2012-06-16 18:06:43

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

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

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

$("#example").autocomplete( "search", "%" );
2  
2013-03-06 12:57:31

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

$('#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  
2013-11-15 12:30:08 
<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/

2  
2014-12-02 01:11:23

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

$( "#dropdownlist" ).autocomplete({
      source: availableTags,
      minLength: 0 
    }).focus(function() {
      $(this).autocomplete('search', $(this).val())
    });
});
2  
2016-09-20 11:10:12

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

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

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

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

это прекрасно работает в Firefox, IE, Chrome ...

1  
2012-11-21 09:48:18 
$("#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
        });
1  
2014-04-28 06:10:32

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

0  
2010-11-25 11:50:32

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

0  
2012-03-31 13:43:18

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

0  
2012-12-10 04:05:52

я использовал таким образом:

$("#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  
2016-01-27 08:24:42

Comments

    Ничего не найдено.
Click here to cancel reply.