Hello I am using jQuery UI autocomplete.
I am getting values and labels from the drop down area. I will write the value in a hidden input and use it later. I could do that, but I cannot write the label in the search input, after the select item. When I select a row in the dropdown box, the value of the row is displayed in the search area (#tags), but I want the label in there.
Here is my code: Thanks
<html>
<head>
<script>
$(document).ready(function () {
var selectedLabel = null;
var yerler = [
{ "value": 3, "label": "Adana Seyhan" },
{ "value": 78, "label": "Seyhan Adana" },
{ "value": 17, "label": "Paris Fransa" },
{ "value": 123, "label": "Tokyo Japan"}
];
$("#tags").autocomplete({
source: yerler,
select: function (event, ui) {
$("#projeKatmanRaporCbx").val(ui.item.value);
$("#tags").val(ui.item.label);
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
<input type="text" id="projeKatmanRaporCbx" />
</div>
</body>
</html>
Adding a return false
(or event.preventDefault
) in the select
event solves half of your problem. The remaining problem can be solved by adding a focus
event:
$("#tags").autocomplete({
source: yerler,
focus: function (event, ui) {
event.preventDefault();
$("#tags").val(ui.item.label);
},
select: function (event, ui) {
event.preventDefault();
$("#projeKatmanRaporCbx").val(ui.item.value);
$("#tags").val(ui.item.label);
}
});
Demo here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With