在模糊函数的jquery自动完成中获取所选值

Question

我想拥有自动完成功能,当有模糊事件时,文本框应填充值列表作为第一项.

我希望功能与此链接链接中实现的功能相同

我有下面的代码,它填充在选项卡上并输入键,但不知道如何在模糊事件上实现相同的功能.

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

编辑: - 用户输入文本让我们说"che"并且不按Tab键或输入键,用户将其控件移动到下一个文本框,在这种情况下,我希望在文本框中自动填充第一个列表项.

Answer 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/

这是一个类似的问题. /sf/answers/1082671481/

Answer 2

这是工作演示

使用 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());
    }
});

如果你有两个自动完成:小提琴

如果你有一个关联数组数据:例如:

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