All geek questions in one place

JQuery UI Autocomplete - How to select an element and assign a label (rather than a value) in the input text

I'm trying to use the jQuery UI autocomplete plugin ( click to see the jQuery UI autocomplete plugin demo page )

I use a list of objects as a data source, as shown below:

var availableTags = [ {label: "Sao Paulo", value: "SP"}, {label: "Sorocaba", value: "SO"}, {label: "Paulinia", value: "PA"}, {label: "São Roque", value: "SR"} ];

The problem is that when I select an item, the value of the data source is set on the input field, not on the label. I created a descriptor for selection to save the value of the element in a hidden field and set the label in the input field, but this event is fired too soon by the plugin and the value is set again in the input field.

HTML:

 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" /> <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" /> <style> .ui-menu-item { font-size: 12px; } </style> <script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var availableTags = [ {label: "Sao Paulo", value: "SP"}, {label: "Sorocaba", value: "SO"}, {label: "Paulinia", value: "PA"}, {label: "São Roque", value: "SR"} ]; $("#txtCidade").autocomplete({ minLength: 0, source: availableTags); }); function OnSelect(event, ui) { var item = ui.item; var itemLabel = item.label; var itemValue = item.value; $("#hidCidade").val(itemValue); $("#txtCidade").val(itemLabel); } </script> </head> <body> <form> <input id="hidCidade" type="hidden" /> <input id="txtCidade" type="input" class="ui-autocomplete-input" /> </form> </body> </html>

Please help me with this?

Thanks!

+6
source share
3 answers

I solved the problem of creating handlers for OnFocus and OnSelect and returning false in each of them.

  function OnFocus(event, ui) { $( "#txtCidade" ).val( ui.item.label ); return false; } function OnSelect(event, ui) { var item = ui.item; var itemLabel = item.label; var itemValue = item.value; var campo = $("#txtCidade"); $("#hidCidade").val(itemValue); $("#txtCidade").val(itemLabel); var campoValue = campo.val(); var hidCampoValue = $("hidCidade").val(); return false; }
0
source

Since I just needed to solve it. I thought I would show my decision. IMHO is cleaner since you do not need separate OnSelect and OnFocus functions. (although he really does the same thing that rperson did)

 $('#txtCidade').autocomplete({ source: availableTags, focus: function(event, ui) { $(this).val(ui.item.label); return false; }, select: function(event, ui) { $('#hidCidade').val(ui.item.value); $(this).val(ui.item.label); return false; } });​
+9
source

Change your autocomplete call to the following:

 $("#txtCidade").autocomplete({ source: availableTags, select: function(event, ui) { $("#hidCidade").val(ui.item.label); } });​

#txtCidade should automatically display the selected label when you click on an autocomplete item.

See jsFiddle example here .

+1
source

Source: https://habr.com/ru/post/911104/

More articles:


All Articles