将 asp.net 服务器端数据绑定到 Html 组合框答案

【问题标题】：Bind asp.net Server Side Data to Html Combobox将 asp.net 服务器端数据绑定到 Html 组合框
【发布时间】：2011-04-26 06:28:50
【问题描述】：

您好，我想在我的 asp.net 应用程序中使用 Jquery UI AutoComplete Combobox。这是我的示例代码：

我的 Combobox 是一个 html 控件。如何将服务器端数据绑定到它？或者是否可以将 Jquery AutoComplete 框用于 asp.net 组合框？选择一个... ASP C C++ 冷融合时髦的哈斯克尔爪哇 javascript perl php Python 红宝石斯卡拉

JavaScript：

<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 (this.value && (!request.term || matcher.test(text))) return {
                            id: this.value,
                            label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                            value: text
                        };
                    }));
                },
                delay: 0,
                change: function (event, ui) {
                    if (!ui.item) {
                        // remove invalid value, as it didn't match anything
                        $(this).val("");
                        return false;
                    }
                    select.val(ui.item.id);
                    self._trigger("selected", event, {
                        item: select.find("[value='" + ui.item.id + "']")
                    });

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

})(jQuery);

$(function () {
    $("#combobox").combobox();
    $("#toggle").click(function () {
        $("#combobox").toggle();
    });
});
</script>

【问题讨论】：

标签： asp.net jquery html jquery-ui autocomplete

【解决方案1】：

您可以将数据源绑定到选择/下拉元素，就像没有附加组合框一样。这就是你应该开始的方式。在没有 combobx 的情况下让它工作。一旦你得到了数据的渲染和一个简单的下拉菜单，你就可以添加上面的代码，你就可以了。

【讨论】：