Bind asp.net Server Side Data to Html Combobox

Question

hello i want to use Jquery UI AutoComplete Combobox in my asp.net application. Here Is My Sample Code :

My Combobox is an html control. how can i bind server side data to it? Or Is It possible to Use Jquery AutoComplete box for asp.net combobox? Select one... asp c c++ coldfusion groovy haskell java javascript perl php python ruby scala

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

You would bind the data source to the select/dropdown element just as if there was no combobox attached to it. And that is how you should start. Get it working without the combobx getting in the way. Once you've got the data rendered and a plain dropdown, you'll be able to add the code you have above and you'll be golden.