jQuery Forum

I have following select list with selected item but when i create jquery ui autocomplete combobox using ($("select").combobox()), it's failed to show selected value. show only empty textbox ratherthan showing 'Christchurch'.  Can any one know why??????

 <select name="City" id="City"><option value="1">Auckland City</option>
            <option value="30">Carterton</option>
            <option value="7" selected="selected">Christchurch</option>
            <option value="9">Dunedin</option><option value="20">Gisborne</option>
            <option value="8">Hamilton</option><option value="12">Hastings</option>
            <option value="27">Helensville</option><option value="18">Invercargill</option>
            <option value="4">Manukau City</option><option value="35">Mount Maunganui</option>
        </select>

javascript that i am using to create autocomplete

<script type="text/javascript">
        (function ($) {
            $.widget("ui.combobox", {
                _create: function () {
                    var self = this;
                    var select = this.element.hide();
                    var input = $("<input>")
                    .insertAfter(select)
                    .autocomplete({
                        source: function (request, response) {
                            var matcher = new RegExp(request.term, "i");
                            response(select.children("option").map(function () {
                                var text = $(this).text();
                                if (!request.term || matcher.test(text))
                                    return {
                                        id: $(this).val(),
                                        label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                        value: text
                                    };
                            }));
                        },
                        delay: 0,
                        select: function (e, ui) {
                            if (!ui.item) {
                                // remove invalid value, as it didn't match anything
                                $(this).val("");
                                return false;
                            }
                            $(this).focus();
                            select.val(ui.item.id);
                            self._trigger("selected", null, {
                                item: select.find("[value='" + ui.item.id + "']")
                            });

                        },
                        minLength: 0
                    })
                    .addClass("ui-widget ui-widget-content ui-corner-left");
                    $("<button>&nbsp;</button>")
                .insertAfter(input)
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                }).removeClass("ui-corner-all")
                .addClass("ui-corner-right ui-button-icon")
                .position({
                    my: "left center",
                    at: "right center",
                    of: input,
                    offset: "-1 0"
                }).css("top", "")
                .click(function () {
                    // close if already visible
                    if (input.autocomplete("widget").is(":visible")) {
                        input.autocomplete("close");
                        return false;
                    }
                    // pass empty string as value to search for, displaying all results
                    input.autocomplete("search","");
                    input.focus();
                    return false;
                });
                }
            });

        })(jQuery);

        $(function () {
            $("select").combobox();
        });
    </script>

 

I had even tries using this