combobox problem with selected entries

combobox problem with selected entries

I got a search formular including some fields like a select list

  1. <select id="whatever">
          <option value=1>Entry 1</option>
          <option value=2 selected="selected">Entry 2</option>
          <option value=3>Entry 3</option>
    </select>



then using it like in the example

  1.     (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"), "<font color='#7bbdd9'><em><strong>$1</strong></em></font>"),
                                            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();
        });






































































I now want it to display the selected entry by default. If i do a form->submit i'll set the selected one in my code.

But the combobox is empty all the time.