Получить выбранное значение в автозаполнении jquery при размытии

Я хочу иметь автоматическую полную функциональность, где текстовое поле должно заполняться списком значений в качестве первого элемента, когда есть событие размытия.

Я хотел бы иметь такую же функциональность, как реализованную в этой ссылке ссылка

У меня есть код ниже, который заполняется на вкладке и вводит ключ, но не знает, как достичь такой же функциональности в событии размытия.

$( "#statelist" ).autocomplete({
    autoFocus: true,
    source: states,
    select: function (event, ui) {
        stateid = (ui.item.lable);
        $("#stateid").val(stateid);
    }
});

ИЗМЕНИТЬ: - пользователь вводит текст, и мы можем набрать "che" и не нажимая вкладку или вводить ключ, пользователь перемещает свой элемент управления в следующее текстовое поле. В этом сценарии я хочу, чтобы первый элемент списка автоматически заполнялся в текстовом поле.

Ответ 1

Вы можете отправить клавишу ввода при событии размытия.

     $( "#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/...

Ответ 2

Это рабочий DEMO

Используйте autoFocus: true параметр, доступный для автозаполнения, а затем поместите первый результат, полученный в поле ввода в событии blur простой.

JS:

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

Ответ 3

Я думаю, что вам не хватает:

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);
                           },
                        }
   });

Ответ 4

здесь я оставляю вам функцию, уже работающую на то, что вам нужно, чтобы получить значение при размытии

Вставьте часть кода здесь

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

JsFiddle DEMO

Ответ 5

Отметьте Fiddle. Это может помочь вам...

Script

$( "#from" ).autocomplete({
    source: fromCity,
    select: function(event, ui) { 
        $( "#from" ).blur();        
        $( "#to" ).focus();
    }
});   
$( "#to" ).autocomplete({
    source: toCity
});

Ответ 6

Попробуйте это. Он должен работать для вас:

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

Ответ 7

Проверенное решение Он заставит выбрать первый элемент, если его нет Будет работать и при первом поиске в автозаполнении и щелкнуть куда-нибудь, даже не сосредоточив внимание на списке элементов

Попробуйте 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');
    }
});

Ответ 8

Чтобы решить проблему, описанную @pappu_kutty, в разделе комментариев отмеченного ответа

"@andyf, это работает так, как я ожидал, но одна проблема, которую я нашел, скажем, я ввел" a "и элементы, перечисленные в раскрывающемся списке, наведите курсор на список itmes и отошли от списка, в этом случае ни один из выбранные элементы и автозаполнение не работают:) - pappu_kutty"

добавьте ниже код для события изменения автозаполнения. Это в основном предотвращает любой недопустимый выбор в поле автозаполнения.

change: function (event, ui) {
                if (ui.item == null) {
                    $(this).val('');
                    $(this).focus();
                    return;
                }
}

Ответ 9

Несколько автозаполнений с использованием ответа @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());
    }
});