jQuery 在模糊功能上获取jquery自动完成中的选定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22746493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the selected value in jquery autocomplete on blur function
提问by pappu_kutty
I want to have auto complete functionality, where the text-box should get populated with the value list as a first item when there is an blur event.
我想要自动完成功能，当出现模糊事件时，文本框应该填充值列表作为第一项。
I would like to have the functionality same as implemented in this link link
我希望具有与此链接链接中实现的功能相同的功能
I have the code below, which populates on tab and enter key, but dont know how to achieve same functionality on blur event.
我有下面的代码，它填充在选项卡上并输入键，但不知道如何在模糊事件上实现相同的功能。
$( "#statelist" ).autocomplete({
autoFocus: true,
source: states,
select: function (event, ui) {
stateid = (ui.item.lable);
$("#stateid").val(stateid);
}
});
EDIT :- user enters a text lets us say type "che" and without pressing tab or enter key, user moves his control to next textbox, in this scenario I want the first list item to populated automatically in the textbox.
编辑：- 用户输入文本让我们说输入“che”，无需按 Tab 或 Enter 键，用户将其控件移动到下一个文本框，在这种情况下，我希望第一个列表项自动填充到文本框中。
回答by andyf
You can send a enter key on blur event.
您可以在模糊事件上发送回车键。
$( "#statelist" ).blur(function(){
var keyEvent = $.Event("keydown");
keyEvent.keyCode = $.ui.keyCode.ENTER;
$(this).trigger(keyEvent);
}).autocomplete({
autoFocus: true,
source: states,
// ...
});
Here is the fiddle: http://jsfiddle.net/trSdL/4/
这是小提琴：http: //jsfiddle.net/trSdL/4/
And here is a similar question. https://stackoverflow.com/a/15466735/1670643
这是一个类似的问题。 https://stackoverflow.com/a/15466735/1670643
回答by Aditya
This is the Working DEMO
这是工作演示
Use autoFocus: trueoption available for the autocomplete, and then put the first result obtained into your input box on the blurevent,simple.
使用 autoFocus: true自动完成可用的选项，然后将获得的第一个结果放入blur事件的输入框中，简单。
JS :
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());
}
});
If you have two autocomplete : Fiddle
如果您有两个自动完成功能：Fiddle
If you have an associative array data: Eg:
如果您有关联数组数据：例如：
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}
];
Use:
用：
ui.item.labelgives the label , ui.item.valuegives the corresponding value : DEMO
ui.item.label给出标签，ui.item.value给出对应的值：DEMO
select: function(event, ui) {
$('#tags').val(ui.item.label); //shows label in autocomplete
select=true;
return false;
}
You can also access data.autocomplete.selectedItemin your changeevent of autocomplete to get the selected autocomplete object ,See here
您还可以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);
}
回答by JBC
I think you are missing:
我认为你缺少：
change: function( event, ui ) {}
http://api.jqueryui.com/autocomplete/
http://api.jqueryui.com/autocomplete/
*untested
*未经测试
$( "#statelist" ).autocomplete({
change: function( event, ui ) {}
autoFocus: true,
source: states,
select: function (event, ui) {
stateid = (ui.item.lable);
$("#stateid").val(stateid);
},
}
});
回答by alecellis1985
here i leave you a function already working for what you need getting the value on blur
在这里，我给您留下一个已经为您需要获得模糊价值的功能而工作的功能
I paste part of the code here
我在这里粘贴部分代码
$( "#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());
}
});
回答by Soundar
回答by Neeraj Kumar
Please try this. It should work for you:
请试试这个。它应该适合你：
$('#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);
});
回答by Gangwar Ramakant
Tested solutionIt will force select first item if there is none Will work also when you first search in autocomplete and click over somewhere without even focusing on item list
经过测试的解决方案如果没有，它将强制选择第一个项目 当您第一次在自动完成中搜索并单击某处甚至不关注项目列表时也会起作用
Try this http://jsfiddle.net/killwithme/ke8osq27/
试试这个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');
}
});
回答by Ben M
To solve the issue described by @pappu_kutty in comment section of marked answer
解决@pappu_kutty 在标记答案的评论部分中描述的问题
"@andyf this is working as i expected, but one issue i found, let us say i entered "a" and items listed in dropdown i hover over list itmes and moved away from the list, in this case none of the items selected and autocomplete doesnt work :) – pappu_kutty"
“@andyf 这正如我预期的那样工作，但是我发现了一个问题，假设我输入了“a”和下拉列表中列出的项目，我将鼠标悬停在列表项目上并从列表中移开，在这种情况下，没有选择任何项目和自动完成不起作用:) – pappu_kutty”
add below code to autocomplete change event. It basically prevents any invalid choice in the autocomplete box.
添加以下代码以自动完成更改事件。它基本上可以防止自动完成框中的任何无效选择。
change: function (event, ui) {
if (ui.item == null) {
$(this).val('');
$(this).focus();
return;
}
}
回答by Ben M
Multiple autocompletes using @Aditya answer. After some researches the best I found has been to apply classes at the open method on the dropdown and using them to match the right dropdown.
使用@Aditya 回答的多个自动完成。经过一些研究，我发现最好的方法是在下拉列表的 open 方法中应用类，并使用它们来匹配正确的下拉列表。
Fiddle: http://jsfiddle.net/ac1fkr5w/2/
小提琴：http: //jsfiddle.net/ac1fkr5w/2/
Code:
代码：
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());
}
});
