绑定asp.net服务器端数据为Html组合框

问题描述

你好，我想使用jQuery UI的自动完成组合框在我的asp.net应用程序。
    这里是我的示例code：

我的组合框是一个html控件。
我怎么可以绑定服务器端的数据呢？
或者是有可能使用jQuery自动完成框asp.net组合框？
     
                选择一个...
                ASP
                C
                C ++
                ColdFusion的
                常规
                哈斯克尔
                java的
                JavaScript的
                perl的
                PHP
                蟒蛇
                红宝石
                斯卡拉
            

的JavaScript

 ＆LT;脚本类型=文/ JavaScript的＆GT;
（函数（$）{
    $ .widget（ui.combobox，{
        _create：功能（）{
            VAR自我=这一点;
            VAR选择= this.element.hide（）;
            VAR输入= $（＆LT;输入＆gt;中）。insertAfter（选择）.autocomplete（{
                来源：函数（请求，响应）{
                    VAR匹配=新的RegExp（request.term，I）;
                    响应（select.children（选项）。图（函数（）{
                        变种文字= $（本）的.text（）;
                        如果（THIS.VALUE＆安培;及（request.term || matcher.test（文本））！）{回报
                            ID：THIS.VALUE，
                            标签：text.replace（新的RegExp（+ $ .ui.autocomplete.escapeRegex（request.term？！（[^＆放;;] +）（小于[^＆LT;＆GT] *）（？！ ）+）（？！[^＆所述;]的计算值* GT）（[^＆放大器;;] +;？！），GI），＆所述;强＆GT; $ 1所述; /强＆gt;中） ，
                            值：文本
                        };
                    }））;
                }，
                延迟：0，
                改变：函数（事件，UI）{
                    如果（！ui.item）{
                        //删除无效的价值，因为它没有匹配
                        $（本）.VAL（）;
                        返回false;
                    }
                    select.val（ui.item.id）;
                    self._trigger（选中，事件，{
                        项目：select.find（[值='+ ui.item.id +']）
                    }）;                }，
                的minLength：0
            }）addClass（UI小部件的UI控件内容的UI角遗）。
            $（＆LT;按钮＆GT;＆安培; NBSP;＆LT; /按钮＆gt;中）。ATTR（的tabIndex，-1）.attr（称号，显示所有项目）insertAfter（输入）.button（{
                图标：{
                    初级：UI图标三角-1-S
                }，
                文本：假
            }）。removeClass移除（UI角一切）。addClass（UI角右UI按钮图标）。点击（函数（）{
                //关闭，如果已经显现
                如果（input.autocomplete（小部件）是（：可见））{
                    input.autocomplete（亲密）;
                    返回;
                }
                //传递空字符串值，搜索，显示所有结果
                input.autocomplete（搜索，）;
                input.focus（）;
            }）;
        }
    }）;}）（jQuery的）;$（函数（）{
    $（＃组合框），组合框（）。
    $（＃切换）。点击（函数（）{
        $（＃组合框）切换（）。
    }）;
}）;
＆LT; / SCRIPT＆GT;
 

解决方案

您将数据源选择/下拉列表元素，就像如果没有连接到它组合框绑定。这就是你如何开始。搞不定没有combobx的方式获得。一旦你呈现的数据和一个普通的下拉列表中，你就可以添加code你有上面，你会金。

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>

解决方案

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.

这篇关于绑定asp.net服务器端数据为Html组合框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！