Question

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

我希望功能与此链接link

中实现的功能相同

enter image description here

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

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

这是一个类似的问题。 https://stackoverflow.com/a/15466735/1670643

Answer 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以获取所选的自动填充对象See here

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

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

Answer 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

Answer 5

选中此Fiddle ..这可能有助于您......

<强>脚本

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

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

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

Answer 8

解决@pappu_kutty在标记答案的评论部分中描述的问题

＆＃34; @andyf这是按照我的预期工作，但我找到了一个问题，让我们说我进入了＃34; a＆＃34;和下拉列表中列出的项目我将鼠标悬停在列表主题上并从列表中移开，在这种情况下，所有选项和自动完成都不起作用:) - pappu_kutty＆＃34;

将以下代码添加到自动填充更改事件中。它基本上阻止了自动完成框中的任何无效选择。

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

Answer 9

使用@Aditya答案的多个自动填充。经过一些研究后，我发现最好的方法是在下拉列表中使用open方法应用类，并使用它们来匹配正确的下拉列表。

小提琴：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());
    }
});

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

9 个答案:

JS：