jquery autocomplete combobox doesn't show default SelectedItem

jquery autocomplete combobox doesn't show default SelectedItem

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>

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>")
                        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
                                return false;
                            self._trigger("selected", null, {
                                item: select.find("[value='" + ui.item.id + "']")

                        minLength: 0
                    .addClass("ui-widget ui-widget-content ui-corner-left");
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    text: false
                .addClass("ui-corner-right ui-button-icon")
                    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")) {
                        return false;
                    // pass empty string as value to search for, displaying all results
                    return false;


        $(function () {

please help