如何在自动完成中获取所选项目的值
Posted
技术标签:
【中文标题】如何在自动完成中获取所选项目的值【英文标题】：how to get value of selected item in autocomplete 【发布时间】：2013-11-09 14:27:40 【问题描述】：我在这里有一个来自http://jqueryui.com/autocomplete/ 的代码，它工作得非常好，但我找不到在文本视图中获取所选项目值的方法，我尝试了类似的方法，但它不起作用
<script>
$(document).ready(function ()
$('#tags').change(function ()
$('#tagsname').html('You selected: ' + this.value);
).change();
);
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function()
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"javascript",
"Lisp",
"Perl",
"php",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete(
source: availableTags
);
);
</script>
<script>
$(document).ready(function ()
$('#tags').change(function ()
$('#tagsname').html('You selected: ' + this.value);
).change();
);
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
<div id="tagsname"></div>
</div>
</body>
</html>
【问题讨论】：
jqueryui.com/autocomplete/#custom-data - 检查这个网址 不要在 jQM 中使用.ready()。
@Omar 你有什么更好的建议？
jquerymobile.com/demos/1.2.0/docs/api/events.html 我正在阅读这篇文章，如果我有问题，稍后再联系你。谢谢。如果我问一下使用 JQM 事件比 .ready 有什么优势，你介意吗？它会影响很多事情吗？ ?
jsfiddle.net/killwithme/ke8osq27
【参考方案1】：
当自动完成更改一个值时，它会触发 autocompletechange 事件，而不是更改事件
$(document).ready(function ()
$('#tags').on('autocompletechange change', function ()
$('#tagsname').html('You selected: ' + this.value);
).change();
);
演示：Fiddle
另一种解决方案是使用select事件，因为只有输入模糊时才会触发change事件
$(document).ready(function ()
$('#tags').on('change', function ()
$('#tagsname').html('You selected: ' + this.value);
).change();
$('#tags').on('autocompleteselect', function (e, ui)
$('#tagsname').html('You selected: ' + ui.item.value);
);
);
演示：Fiddle
【讨论】：
但是当在文本框上调用模糊事件时，只有我们得到正确的输出 它可以工作，但是当我更改项目时，tagsname 中的值保持不变我应该如何刷新它？而且延迟这么长有没有办法让延迟更短？ @ArunPJohny 我做得非常好，但是有没有办法当我选择一个项目时，值会自动显示它需要一段时间才能显示，但如果它是这样就可以了，现在我明白你的意思了那真是太好了【参考方案2】：为了更笼统地回答这个问题，答案是：
select: function( event , ui )
alert( "You selected: " + ui.item.label );
完整示例：
$('#test').each(function(i, el)
var that = $(el);
that.autocomplete(
source: ['apple','banana','orange'],
select: function( event , ui )
alert( "You selected: " + ui.item.label );
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Type a fruit here: <input type="text" id="test" />【讨论】：
我认为这是完整的答案 我同意这个答案，因为它使用了自动完成组件提供的事件回调。无需在事件绑定上使用 jQuery。【参考方案3】：$(document).ready(function ()
$('#tags').on('change', function ()
$('#tagsname').html('You selected: ' + this.value);
).change();
$('#tags').on('blur', function (e, ui)
$('#tagsname').html('You selected: ' + ui.item.value);
);
);
【讨论】：
虽然此代码可能有助于解决问题，但提供有关 why 和/或 如何 回答问题的附加上下文将显着改善长期价值。请edit你的答案添加一些解释。【参考方案4】：我想要一些与此非常接近的东西 - 当用户选择一个项目时，即使只是将箭头键按到一个（焦点），我希望该数据项附加到相关标签上。当他们再次键入而不选择其他项目时，我希望清除该数据。
(function()
var lastText = '';
$('#MyTextBox'),
source: MyData
)
.on('autocompleteselect autocompletefocus', function(ev, ui)
lastText = ui.item.label;
jqTag.data('autocomplete-item', ui.item);
)
.keyup(function(ev)
if (lastText != jqTag.val())
// Clear when they stop typing
jqTag.data('autocomplete-item', null);
// Pass the event on as autocompleteclear so callers can listen for select/clear
var clearEv = $.extend(, ev, type: 'autocompleteclear' );
return jqTag.trigger(clearEv);
);
)();
有了这个，'autocompleteselect' 和 'autocompletefocus' 仍然会在你期望的时候触发，但是被选中的完整数据项总是在标签上可用。 'autocompleteclear' 现在会在清除该选择时触发，通常是通过键入其他内容。
【讨论】：
【参考方案5】：好的，所以在我的特殊情况下，我有多个使用相同类的文本输入，所有这些都使用具有相同自动完成数据集的 jQuery Autocomplete。
由于所有这些输入都需要设置它们的值才能通过 $_POST 成功提交，所以我很困惑为什么在从预定义的自动完成列表。
经过多次反复，由于所有提到的输入共享同一个核心类，这就是我最终要做的：
// setup autcomplete
$('.sample-input').autocomplete(
// define source data
source: autocomp_data,
// setup input event as per docs
select: function(event, ui)
// set the target element
let target = $(this);
// retrieve selected value from event
let selected = ui.item.value;
// set target value using .attr (using .val() does not work, for some reason)
target.attr('value', selected);
);
通过这种方式，我实际上能够为每个输入设置正确的值，并通过 $_POST 提交工作。不确定为什么默认情况下 jQuery UI Autocomplete 不会执行此操作（我相信 SE 上的某些专家知道），但是是的，上面的 sn-p 为我解决了这个问题。
【讨论】：
以上是关于如何在自动完成中获取所选项目的值的主要内容，如果未能解决你的问题，请参考以下文章
如何根据从 ajax 调用返回的数据动态地将选项添加到我的自动完成功能？