Я хочу иметь автоматическую полную функциональность, где текстовое поле должно заполняться списком значений в качестве первого элемента, когда есть событие размытия.
Я хотел бы иметь такую же функциональность, как реализованную в этой ссылке ссылка
У меня есть код ниже, который заполняется на вкладке и вводит ключ, но не знает, как достичь такой же функциональности в событии размытия.
$( "#statelist" ).autocomplete({
autoFocus: true,
source: states,
select: function (event, ui) {
stateid = (ui.item.lable);
$("#stateid").val(stateid);
}
});
ИЗМЕНИТЬ: - пользователь вводит текст, и мы можем набрать "che" и не нажимая вкладку или вводить ключ, пользователь перемещает свой элемент управления в следующее текстовое поле. В этом сценарии я хочу, чтобы первый элемент списка автоматически заполнялся в текстовом поле.
Вы можете отправить клавишу ввода при событии размытия.
$( "#statelist" ).blur(function(){
var keyEvent = $.Event("keydown");
keyEvent.keyCode = $.ui.keyCode.ENTER;
$(this).trigger(keyEvent);
}).autocomplete({
autoFocus: true,
source: states,
// ...
});
Вот скрипка: http://jsfiddle.net/trSdL/4/
И вот аналогичный вопрос. fooobar.com/questions/185898/...
Это рабочий DEMO
Используйте autoFocus: true параметр, доступный для автозаполнения, а затем поместите первый результат, полученный в поле ввода в событии blur простой.
$("#tags").autocomplete({
source: availableTags,
autoFocus: true,
selectFirst: true,
open: function(event, ui) { if(select) select=false; },
select: function(event, ui) { select=true; }
}).blur(function(){
if(!select)
{
$("#tags").val($('ul.ui-autocomplete li:first a').text());
}
});
Если у вас есть два автозаполнения: Fiddle
Если у вас есть ассоциативный массив данных: Например:
var availableTags = [
{'label': 'dog', 'value':1},
{ 'label' : 'cat' , 'value':2} ,
{'label': 'ant', 'value':3},
{'label': 'bat', 'value':4},
{'label': 'deer', 'value':5},
{'label': 'elephant', 'value':6},
{'label': 'frog', 'value':7},
{'label': 'giraffe', 'value':8},
{'label': 'snake', 'value':9}
];
Применение:
ui.item.label дает метку, ui.item.value дает соответствующее значение: DEMO
select: function(event, ui) {
$('#tags').val(ui.item.label); //shows label in autocomplete
select=true;
return false;
}
Вы также можете получить доступ к data.autocomplete.selectedItem в своем change событии автозаполнения, чтобы получить выбранный объект автозаполнения, См. здесь
change:function(event,ui){
if(!select)
{
$('ul.ui-autocomplete li:first a').trigger('click');
}
var data=$.data(this);//Get plugin data for 'this'
console.log(data.autocomplete.selectedItem);
}
Я думаю, что вам не хватает:
change: function( event, ui ) {}
http://api.jqueryui.com/autocomplete/
* непроверенный
$( "#statelist" ).autocomplete({
change: function( event, ui ) {}
autoFocus: true,
source: states,
select: function (event, ui) {
stateid = (ui.item.lable);
$("#stateid").val(stateid);
},
}
});
здесь я оставляю вам функцию, уже работающую на то, что вам нужно, чтобы получить значение при размытии
Вставьте часть кода здесь
$( "#tags" ).autocomplete({
source: availableTags,
open: function(event, ui) { disable=true; },
close: function(event, ui) {
disable=false; $(this).focus(); }
}).blur(function(){
if(!disable){
alert($(this).val());
}
});
Отметьте Fiddle. Это может помочь вам...
Script
$( "#from" ).autocomplete({
source: fromCity,
select: function(event, ui) {
$( "#from" ).blur();
$( "#to" ).focus();
}
});
$( "#to" ).autocomplete({
source: toCity
});
Попробуйте это. Он должен работать для вас:
$('#statelist').autocomplete({
source: states,
autoFocus: true,
selectFirst: true,
open: function(event, ui) { if(select) select=false; },
select: function(event, ui) { select=true; },
})
.live("blur", function(event) {
var get_val = $('ul.ui-autocomplete li:first a').text();
$('#stateid').val(get_val);
});
Проверенное решение Он заставит выбрать первый элемент, если его нет Будет работать и при первом поиске в автозаполнении и щелкнуть куда-нибудь, даже не сосредоточив внимание на списке элементов
Попробуйте http://jsfiddle.net/killwithme/ke8osq27/
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
];
$("#tags").autocomplete({
source: availableTags,
autoFocus: true,
selectFirst: true,
select: function(event, ui) {
$("#tags").val(ui.item.value);
$("#tags-span").text(ui.item.value);
}
}).on('autocompletechange', function() {
if ($(this).data('ui-autocomplete').selectedItem === null) {
//this will trigger your select automatically so it will handle other custom override you did for select
$(this).data('ui-autocomplete').menu.element.children('li:first').children('a').trigger('click');
}
});
Чтобы решить проблему, описанную @pappu_kutty, в разделе комментариев отмеченного ответа
"@andyf, это работает так, как я ожидал, но одна проблема, которую я нашел, скажем, я ввел" a "и элементы, перечисленные в раскрывающемся списке, наведите курсор на список itmes и отошли от списка, в этом случае ни один из выбранные элементы и автозаполнение не работают:) - pappu_kutty"
добавьте ниже код для события изменения автозаполнения. Это в основном предотвращает любой недопустимый выбор в поле автозаполнения.
change: function (event, ui) {
if (ui.item == null) {
$(this).val('');
$(this).focus();
return;
}
}
Несколько автозаполнений с использованием ответа @Aditya. После некоторых исследований лучше всего было применить классы в открытом методе в раскрывающемся списке и использовать их для соответствия выпадающему списку справа.
Fiddle: http://jsfiddle.net/ac1fkr5w/2/
Код:
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
var select = false;
$("#tags").autocomplete({
source: availableTags,
autoFocus: true,
selectFirst: true,
open: function(event, ui) {
//Adding class
$(this).data("uiAutocomplete").menu.element.addClass("tags");
if(select) select=false; },
select: function(event, ui) { select=true; }
}).blur(function(){
if(!select)
{
//Using class to match the right ul
$("#tags").val($('ul.tags li:first a').text());
}
});
$("#tags2").autocomplete({
source: availableTags,
autoFocus: true,
selectFirst: true,
open: function(event, ui) {
$(this).data("uiAutocomplete").menu.element.addClass("tags2");
if(select) select=false;
},
select: function(event, ui) { select=true; }
}).blur(function(){
if(!select)
{
$("#tags2").val($('ul.tags2 li:first a').text());
}
});