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>
</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> </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>
please help