Question

你好我想在我的asp.net应用程序中使用Jquery UI AutoComplete Combobox。这是我的样本代码：

我的Combobox是一个HTML控件。如何将服务器端数据绑定到它？或者是否可以使用asp.net组合框的Jquery自动完成框？选择一个...... ASP C C ++ ColdFusion的常规哈斯克尔 java的 JavaScript的 perl的 PHP 蟒蛇红宝石斯卡拉

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>

Answer 1

您可以将数据源绑定到select / dropdown元素，就像没有附加组合框一样。这就是你应该如何开始的。让它工作，没有组合框阻碍。一旦你获得了渲染的数据和一个简单的下拉列表，你就可以添加上面的代码，你就会变得很好。

将asp.net服务器端数据绑定到Html Combobox

1 个答案: