JQuery UI Autocomplete - How to select an item and mantain the label (not the value) in the input text

jquery autocomplete select event selected value
jquery autocomplete autofocus
jquery autocomplete textbox
jquery autocomplete parameters
jquery autocomplete plugin
jquery ui autocomplete cdn
jquery autocomplete appendto
jquery autocomplete _rendermenu example

I´m trying to use the JQuery UI Autocomplete plugin (click to see the demo page of JQuery UI Autocomplete plugin)

I´m using as datasource a list of objects as bellow:

            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 datasource is set to the input field and not the label. I´ve created a handle to the select to save the item value in a hidden field and set the label to the input field, but this event is fired too soon by the plugin and the value is re-set to 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, could someone help me with this?

Thanks!

Since I just had to solve this too. I thought I would show my solution. IMHO it is cleaner since you don't need the separate OnSelect and OnFocus functions. (though it really does the same thing as what rperson ended up doing)

$('#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;
  }
});​

jQuery UI autocomplete with item and id, You need to use the ui.item.label (the text) and ui.item.value (the id) properties Without this, the input was set with the right value inside the select function and then it was set to To keep this part short, I will do some search from local data. In my JQuery autocomplete UI, I need to set different values in display-text and value. (Just like, we can do with traditional DropDownlist - DataText and DataValue fields). How can I achieve that? My datasource is a Json just as below - var citySearch = cities.Select(r => new { label = r.CityName, value = r.CityName });

Change your autocomplete call to the following:

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

#txtCidade should automatically pckup the selected label when an autocomplete item is clicked on.

See a jsFiddle example here.

autocomplete fill value instead of label on select.. why?, jQuery: Write Less, Do More. in Using jQuery UI • 9 years ago. Hi, this is Don' t know why, ONLY when item is selected from returned json data, it fills me up with the item value. This does not happen until all labels are just proposed. Why? 1. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

I´ve solved the issue creating the handlers for OnFocus and OnSelect and returning false in each one.

        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;
        }

#9463 (Autocomplete keyboard navigation) – jQuery UI, The label displayed in the menu dropdown will not match the value in the textbox when using the keyboard up/down buttons to do the select. _trigger( "focus", event, { item: item } ) ) { // use value to match what will end up in the input, if it was an item, the value of the text box is set by me when I override the select method . jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Autocomplete Widget, This can be used to choose previously selected values, such as entering tags for ui-autocomplete-input : The input element that the autocomplete widget was Note: The appendTo option should not be changed while the suggestions menu is open. Independent of the variant you use, the label is always treated as text. UP - Move focus to the previous item. If on first item, move focus to the input. If on the input, move focus to last item. DOWN - Move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item. ESCAPE - Close the menu. ENTER - Select the currently focused item and close the menu.

jQuery UI 1.12 Upgrade Guide, Autocomplete. Require wrappers for each autocomplete menu item. Button. Deprecated icons options in favor of icon and iconPosition; Deprecated text option in� Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute. By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from.

jQuery UI Autocomplete, The value will be inserted into the input element after the user selected something The Autocomplete plugin does not filter the results, instead the request The label is always treated as text, if you want the label to be treated as html you tool to create and download custom themes that are easy to build and maintain. jQuery Autocomplete is very common functionality in now days for auto fill data, Each and every website using autocomplete suggestion on select html box. jQuery Autocomplete provided functionality to the user with a list of suggestions available on select box at the time of word typed, The user don’t need to type entire word or a set of words to find options from select box.The user can

Comments
  • Love it! This was perfect and easy. :)
  • the return false makes all the difference :)
  • Sorry @j08691, but I think that you didn´t understand the question correctly. Using the code that you have provided in jsfiddler, selecting an option, the value (not the label) will appear in the textbox field.
  • Per the documentation, "The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu.". So you can swap the label/values in your data source and then populate the hidden fields via $("#hidCidade").val(ui.item.value);
  • Here is an updated fiddle that works correctly (almost) all the time. Not the recommended approach though (IMHO). jsfiddle.net/9Vp3r/21