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

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

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

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

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

这是工作演示

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

您还可以在自动完成的change事件中访问data.autocomplete.selectedItem以获取所选的自动完成对象， 请参见此处

  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

在这里，我给你留下了一个function，已经为你需要的function获得了模糊的价值

我在这里粘贴部分代码

 $( "#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在标记答案的评论部分中描述的问题

“@andyf这正如我预期的那样工作，但是我发现了一个问题，让我们说我输入”a“并在下拉列表中列出的项目我将鼠标hover在列表主题上并离开列表，在这种情况下，没有选择任何项目自动完成不起作用:) – pappu_kutty“

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

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