如何动态填充JQuery自动完成组合框？

我在用电脑

我有一个简单的选择，如下所示：

<select id="myselect" class="combobox">    
<option value="" ></option>
</select>"

$("#myselect").append('<option value="value1">text 1</option>')

我需要做的是在页面加载后填充组合框。这听起来像是一项琐碎的任务，但在最后一天，我一直在努力让它工作

即使我尝试这样一个简单的附加：

<select id="myselect" class="combobox">    
<option value="" ></option>
</select>"

$("#myselect").append('<option value="value1">text 1</option>')

$（“#myselect”）.append（'text 1'）

该值不会出现在组合框中。上面的调用一定是错误的，但我不知道如何将值附加到combobox

请告诉我怎么做

非常感谢你的帮助

这是我的combobox.js文件的源代码：

(function ($) {
$.widget("ui.combobox", {

    _create: function () {
        var select = this.element;
        select = this.element;
        var watermark = "Please select a restaurant...";
        select.hide();

        // process select options into an array
        var opts = new Array();

        $('option', select).each(function (index) {
            var opt = new Object();
            opt.value = $(this).val();
            if ($(this).text() != "") {
                opt.label = $(this).text();
                opts[opts.length] = opt;
            }
        });

        // set up input text element
        var input = $("<input class='combo_input' type='text'>");

        input.insertAfter(select);
        input.autocomplete({
            source: opts,
            delay: 0,
            change: function (event, ui) {
                if (!ui.item) {
                    // user didn't select an option, but what they typed may still match
                    var enteredString = $(this).val();
                    var stringMatch = false;
                    for (var i = 0; i < opts.length; i++) {
                        if (opts[i].label.toLowerCase() == enteredString.toLowerCase()) {
                            select.val(opts[i].value);// update (hidden) select
                            //$(this).val(opts[i].label);// corrects any incorrect case
                            //opts[i].css("border", "1px solid red");
                            stringMatch = true;

                            // Trigger the custom changed event
                            self._trigger("changed", event, {
                                value: select.val()
                            });
                            break;
                        }
                    }
                    if (!stringMatch) {
                        // remove invalid value, as it didn't match anything
                        $(':selected', select).text("");
                        $(this).val($(':selected', select).text()).addClass('watermark');

                    }
                    return false;
                }
            },
            select: function (event, ui) {
                select.val(ui.item.value);// update (hidden) select
                $(this).val(ui.item.label);
                if ($(this).val() == watermark) {
                    input.addClass('watermark');
                    imgbt.addClass("invisibility");
                }
                else {
                    input.removeClass('watermark');
                    imgbt.removeClass("invisibility");
                }
                // Trigger the selected event
                ui.item.selected = true;
                self._trigger("selected", event, {
                    value: ui.item.value
                });
                return false;
            },
            focus: function (event, ui) {
                if (event.which === 38 || event.which === 40) {
                    $(this).val(ui.item.label);
                    return false;
                }

            },
            // stop parent form from being while menu is open
            open: function (event, ui) {
                input.attr("menustatus", "open");

            },
            close: function (event, ui) {
                input.attr("menustatus", "closed");
            },
            autoFocus: true,
            minLength: 0
        });

        input.addClass("ui-widget");

        // initialise text with what's currently selected

        if ($(':selected', select).val() == "") {
            input.val(watermark).addClass('watermark')
        } else {
            input.val($(':selected', select).text()).removeClass('watermark');
        }
        input.attr('title', input.val());


        // lost focus status            

        input.blur(function (e) {
            if (input.val() == "") {
                input.val(watermark).addClass('watermark');
                imgbt.addClass("invisibility");
            }
            else {
                input.removeClass('watermark')
                imgbt.removeClass("invisibility");
            }
        });

        //clear text when user clicks in text input             
        input.click(function () {
            if ($(this).val() == watermark) {
                $(this).removeClass('watermark').val("");
                imgbt.addClass("invisibility");
            } else {
                imgbt.removeClass("invisibility");
            }

        });


        // over-ride form submit, so it cant submit if the menu is open
        input.attr("menustatus", "closed");
        var form = $(input).parents('form:first');
        $(form).submit(function (e) {
            return (input.attr('menustatus') == 'closed');
        });

        var imgbt = $("<button type=\"button\">&nbsp;</button>");
        imgbt.addClass('clear_bt').addClass('btn');
        if (input.val() == watermark) { imgbt.addClass('invisibility') }
        else { imgbt.removeClass('invisibility') }
        imgbt.insertAfter(input);

        // Clear all the keywords
        imgbt.click(function (e) {
            input.val('');
            $("body").focus();
            $(this).addClass('invisibility');
            $("#rcbRestaurant").val("");
        });
        imgbt.blur(function (e) {
            input.blur();
        });

        // set up button for fake 'select'

        var btn = $("<button>&nbsp;</button>");
        btn.attr("tabIndex", -1);
        btn.attr("title", "Select your option");
        btn.addClass("combobox_bt");
        btn.insertAfter(imgbt);
        if (select.hasClass('disabled')) {
            input.addClass('disabled').attr('disabled', 'disabled');
            btn.addClass('disabled').attr('disabled', 'disabled');
        }
        if (select.hasClass('error')) {
            input.addClass('error').focus();
            btn.addClass('error').focus();
        } else { input.removeClass('error'); btn.removeClass('error'); }

        if (select.attr('autofocus') == 'autofocus') {
            input.focus();
            btn.focus();
        }

        btn.button({
            icons: {
                primary: "ui-icon-triangle-1-s "
            },
            text: false
        });
        btn.removeClass("ui-corner-all");
        btn.addClass("ui-corner-right ui-button-icon");
        btn.click(function () {
            btn.focus();
            input.click();
            //event.preventDefault();
            // close if already visible
            if (input.autocomplete("widget").is(":visible")) {
                input.autocomplete("close");
                return false; // return false, so form isn't automatically submitted
            }
            // pass empty string as value to search for, displaying all results
            input.autocomplete("search", "");
            input.focus();
            return false; // return false, so form isn't automatically submitted
        });

        // add some styles
        btn.css("z-index", "1");
        btn.css("display", "inline");
        btn.css("padding", 0);
        $('span.ui-button-text', btn).css("padding", 0);

        // for testing
        /*
        autocomplete: function(value) {
            this.element.val(value);
            this.input.val(value);
        }
        */
    }
});
})(jQuery);

（函数（$）{
$.widget（“ui.combobox”{
_创建：函数（）{
var select=this.element；
select=this.element；
var watermark=“请选择一家餐厅…”；
select.hide（）；
//将选择选项处理到数组中
var opts=新数组（）；
$（'option'，select）.each（函数（索引）{
var opt=新对象（）；
opt.value=$（this.val（）；
如果（$（this）.text（）！=“”）{
opt.label=$（this.text（）；
opts[opts.length]=opt；
}
});
//设置输入文本元素
变量输入=$（“”）；
input.insertAfter（选择）；
input.autocomplete({
资料来源：opts，
延迟：0，
更改：功能（事件、用户界面）{
如果（！ui.item）{
//用户未选择选项，但键入的内容可能仍然匹配
var enteredString=$（this.val（）；
var stringMatch=false；
对于（变量i=0；i.custom-combobox {
 position: relative;
 display: inline-block;
}
.custom-combobox-toggle {
 position: absolute;
 top: 0;
 bottom: 0;
 margin-left: -1px;
 padding: 0;
 /* support: IE7 */
 height: 1.7em;
 top: 0.1em;
}
.custom-combobox-input {
 margin: 0;
 padding: 0.3em;
}

$("#myselect").append('<option value="value1">text 1</option>');
$('#myselect').combobox();
$("#myselect").append('<option value="value2">text 2</option>');