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

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!

Solution

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