Автозаполнение jQuery для просмотра всех по клику?
-
13-09-2019 - |
Вопрос
Я использую автозаполнение 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 (например, кнопку или ссылку), которое будет отображать все доступные варианты автозаполнения?По сути, я хочу создать гибрид автозаполнения и элемента выбора/выпадающего списка.
Спасибо!
Решение
Я не вижу очевидного способа сделать это в документации, но вы попробуйте вызвать событие фокуса (или щелчка) в текстовом поле с включенным автозаполнением:
$('#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", ""); });
решение от: Отображать список автозаполнения 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());
});
});
попробуй это:
$('#autocomplete').focus(function(){
$(this).val('');
$(this).keydown();
});
и миндлина установлен в 0
работает каждый раз :)
$j(".auto_complete").focus(function() { $j(this).keydown(); })
Ты должен набор 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
})
<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>
Я решил это, используя атрибут 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...
$("#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
});
я не мог получить $("#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 в очень приятный Избранный выбирать списки с помощью Тающий лед обновите, когда у меня будет возможность.
Я использовал этот способ:
$("#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", "");