I want to retrieve the value of autocomplete textbox. I tried to use the following code, but it doesn't work:
$('#my_id').bind('result',function(){});
Any suggestions will be helpful. I don't want to use .text() as it does not satisfies my requirements. Some thing similar to 'result' will be excellent.
There are 2 options.
A) Use event handler select of autocomplete:
$("#my_id").autocomplete({..., select: function(event, ui){...}});
B) Use event handler autocompleteselect:
$("#my_id").on("autocompleteselect", function(event, ui){...}});
In the debugger you can see, that the event in both cases has the same type autocompleteselect. The both approaches are equivalent. You may choose A, if you prefer to keep all the related code together, within a single block. You may choose B, if you prefer strong separation of filling of the autocompletion list from the reaction on the selection.
Example for A:
Type 'a' or 'j' in the input field to see how it works.
<!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>Example for B:
Type 'a' or 'j' in the input field to see how it works.
<!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>
