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

Asked 19/3, 2012 at 14:16 Answered 21/11, 2012 at 5:25

Solved jquery jquery-ui jquery-ui-autocomplete

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!

Blindage answered 19/3, 2012 at 14:16 Comment(0)

-2

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

Blindage answered 19/3, 2012 at 19:46 Comment(0)

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

Discriminator answered 21/11, 2012 at 5:25 Comment(2)

Love it! This was perfect and easy. :) – Wayne 21/7, 2013 at 4:6

the return false makes all the difference :) – Lawanda 6/11, 2013 at 15:4

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.

Multipara answered 19/3, 2012 at 15:2 Comment(3)

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. – Blindage 21/3, 2012 at 23:20

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); – Multipara 22/3, 2012 at 2:2

Here is an updated fiddle that works correctly (almost) all the time. Not the recommended approach though (IMHO). jsfiddle.net/9Vp3r/21 – Khania 7/3, 2013 at 11:58

-2

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

Blindage answered 19/3, 2012 at 19:46 Comment(0)

Recommended topics

Hot tags