JQuery - получить значение элемента автозаполнения
Я хочу получить значение текстового поля автозаполнения. Я пробовал использовать следующий код, но он не работает:
$('#my_id').bind('result',function(){});
Любые предложения будут полезны. Я не хочу использовать .text (), поскольку он не удовлетворяет моим требованиям. Что-то похожее на «результат» будет отлично.
on() - это замена. Я предполагаю, что это сторонний плагин, который создает событие result, к которому вы пытаетесь подключиться?
мы используем jquery-ui, но мы где-то читали, чтобы получить данные из автозаполнения, мы должны использовать .bind ('result'), и ни одно событие не работало. я тоже пробовал .on (), но результат такой же
Ответы 1
Есть 2 варианта.
A) Используйте обработчик событий Выбрать из автозаполнение:
$("#my_id").autocomplete({..., select: function(event, ui){...}});
Б) Используйте обработчик событий автозаполнениевыбор:
$("#my_id").on("autocompleteselect", function(event, ui){...}});
В отладчике видно, что событие в обоих случаях имеет один и тот же тип autocompleteselect. Оба подхода эквивалентны. Вы можете выбрать A, если предпочитаете хранить весь связанный код вместе в одном блоке. Вы можете выбрать B, если предпочитаете четкое разделение заполнения списка автозаполнения от реакции на выбор.
Пример для A:
Введите «a» или «j» в поле ввода, чтобы увидеть, как это работает.
<!doctype html>
<html lang = "en">
<head>
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
var availableItems = [
"ActionScript", "AppleScript", "Groovy", "Java", "JavaScript", "Python", "Scala"
];
$("#my_items").autocomplete({
source: availableItems,
select: function(event, ui) {
alert(
"input: " + event.target.value + "\n" +
"label: " + ui.item.label + "\n" +
"value: " + ui.item.value);
}
});
});
</script>
</head>
<body>
<div class = "ui-widget">
<label for = "my_items">Items: </label>
<input id = "my_items">
</div>
</body>
</html>Пример для B:
Введите «a» или «j» в поле ввода, чтобы увидеть, как это работает.
<!doctype html>
<html lang = "en">
<head>
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
var availableItems = [
"ActionScript", "AppleScript", "Groovy", "Java", "JavaScript", "Python", "Scala"
];
$("#my_items").autocomplete({
source: availableItems
});
$("#my_items").on("autocompleteselect", function(event, ui) {
alert(
"input: " + event.target.value + "\n" +
"label: " + ui.item.label + "\n" +
"value: " + ui.item.value);
});
});
</script>
</head>
<body>
<div class = "ui-widget">
<label for = "my_items">Items: </label>
<input id = "my_items">
</div>
</body>
</html>
Совершенно непонятно, в чем ваш вопрос. Пожалуйста, четко укажите проблему, с которой вы столкнулись, и каков ожидаемый результат. Кстати,
.on()некоторое время назад заменил.bind()в JQuery.