在模糊功能上获取jquery自动完成中的选定值

Posted 2023-03-05

【中文标题】在模糊功能上获取jquery自动完成中的选定值

【英文标题】：Get the selected value in jquery autocomplete on blur function

【发布时间】：2014-05-09 21:38:42

【问题描述】：

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

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

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

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

编辑：- 用户输入文本让我们说输入“che”并且不按 Tab 或 Enter 键，用户将他的控件移动到下一个文本框，在这种情况下，我希望第一个列表项自动填充到文本框中。

【问题讨论】：

你在用jQueryUI吗？

是的，我确实使用 jquery ui

【参考方案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://***.com/a/15466735/1670643

【讨论】：

这个答案不起作用，加上它导致页面挂起这么多警报：S

@pappu_kutty 抱歉，我发布了错误的小提琴链接。请参阅我的更新答案。

@Aditya plus it is causing so many alerts hanging up the page 是指event propagation 吗？如果是这样，您可以停止此事件传播。见jsfiddle.net/trSdL/5

@andyf 这按我的预期工作，但是我发现了一个问题，假设我输入了“a”并且下拉列表中列出的项目我将鼠标悬停在列表项上并从列表中移开，在这个如果没有选择的项目并且自动完成不起作用:)

@andyf 你如何获取选定的数据对象？

【参考方案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;
    

您也可以在您的change自动完成事件中访问data.autocomplete.selectedItem以获取选定的自动完成对象，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);

【讨论】：

当有多个autocomplete 标签时，选择器$('ul.ui-autocomplete li:first a') 不起作用。只需从您的 DEMO 中分叉：jsfiddle.net/6hfyb

那么你将不得不做一个小改动$("#tags2").val($('ul.ui-autocomplete:eq(1) li:first a').text());，请看这里：jsfiddle.net/draditya91/6hfyb/2

@Aditya 如何获取数组对象的文本和值，让我们说 var args=[name:dog, val:1;名称：猫，价值：2；名称：老鼠，价值：3]

@Aditya，选择函数没有在 blur 事件中调用，所以我需要在 blur 中获取项目数据，谢谢

@Aditya 我不认为按索引使用选择器 (:eq(N)) 是个好主意。在某些情况下，当autocomplete标签是动态创建时，很难得到索引号。

【参考方案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 ..这可能会帮助你...

脚本

$( "#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”并且下拉列表中列出的项目我将鼠标悬停在列表项上并从列表中移开，在这种情况下没有选择的项目和自动完成不起作用:) – pappu_kutty"

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

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

【参考方案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());
    
);