jQuery 如何在自动完成中获取所选项目的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19675069/
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
how to get value of selected item in autocomplete
提问by Alain Tiemblo
i have here a code from http://jqueryui.com/autocomplete/it works really good but i cant find a way to get the value of selected item in the text view i tried something like this but its not working
我在这里有一个来自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>
回答by Arun P Johny
When autocomplete changes a value, it fires a autocompletechangeevent, not the change event
当自动完成更改一个值时，它会触发autocompletechange事件，而不是 change 事件
$(document).ready(function () {
$('#tags').on('autocompletechange change', function () {
$('#tagsname').html('You selected: ' + this.value);
}).change();
});
Demo: Fiddle
演示：小提琴
Another solution is to use selectevent, because the change event is triggered only when the input is blurred
另一种解决方案是使用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);
});
});
Demo: Fiddle
演示：小提琴
回答by Alain Tiemblo
To answer the question more generally, the answer is:
为了更笼统地回答这个问题，答案是：
select: function( event , ui ) {
alert( "You selected: " + ui.item.label );
}
Complete example :
完整示例：
$('#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" />回答by user1012506
$(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);
});
});
回答by Chris Moschini
I wanted something pretty close to this - the moment a user picks an item, even by just hitting the arrow keys to one (focus), I want that data item attached to the tag in question. When they type again without picking another item, I want that data cleared.
我想要一些与此非常接近的东西 - 当用户选择一个项目时，即使只是按箭头键（焦点），我也希望将该数据项附加到相关标签上。当他们再次输入而不选择另一个项目时，我希望清除该数据。
(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);
});
})();
With this in place, 'autocompleteselect' and 'autocompletefocus' still fire right when you expect, but the full data item that was selected is always available right on the tag as a result. 'autocompleteclear' now fires when that selection is cleared, generally by typing something else.
有了这个，'autocompleteselect' 和 'autocompletefocus' 仍然会在你期望的时候触发，但是被选中的完整数据项总是在标签上可用。'autocompleteclear' 现在在清除该选择时触发，通常是通过输入其他内容。
