Question

我已经花了12个多的时间来尝试让它在我的页面上工作。下面我将包括我的codebehind（list source＆amp; getter），我的jQuery（在“ready”函数中包含的标题中），以及我的asp.net下拉列表控件，按钮和包含在div中的输入对象。这是我正在尝试实施的combobox。我发现的任何东西都没有帮助。将行动和价值联系在一起似乎是一个问题。 即，该按钮不会切换下拉列表以展开。

为了方便起见，我在代码框中做了所有大写评论，明确指出我需要帮助的地方。排除故障只剩下两件事了。谢谢你们： - ）＆gt;

现在进入代码隐藏---（不是主要问题）

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    combobox.DataSource = car_list
    combobox.DataBind()
End Sub

Protected car_list As New ArrayList({
                                         "Audi",
                                         "Lexus",
                                         "BMW",
                                         "Ford",
                                         "Chevrolet",
                                         "Jeep",
                                         "Jaguar",
                                         "Toyota",
                                         "Nissan",
                                         "Honda",
                                         "Subaru",
                                         "Hyundai",
                                         "Tesla",
                                         "Mercedez",
                                         "Ferrari"
                                         })

//'This function returns the above list as either a String list, or wrapped in a tag
Function getList(ByVal listName As ArrayList, Optional ByVal tagWrapper As String = "", Optional ByVal tagId As String = "") As String
    Dim items As String = "No items in list."
    If Not tagWrapper = "" Then  //'Return as HTML Tagged Objects, a.k.a. Elements or DOM Objects or Nodes
        For Each item In listName
            If Not tagId = "" Then
                items = "<" + tagWrapper + " id=""" + tagId + """" + ">" //'Used if "id" parameter passed in
                items += item.ToString
                items += "</" + tagWrapper + ">" & vbCrLf
            Else
                items = "<" + tagWrapper + ">"
                items += item.ToString
                items += "</" + tagWrapper + ">" & vbCrLf
            End If
        Next
    Else //'Return as String Array, e.g. ["item1", "item2", "item3"]
        For Each item In listName
            Dim isFirstItem As Boolean = True
            If isFirstItem Then //'Treat the first item differently
                isFirstItem = Not isFirstItem
                items = item.ToString
            Else
                items += ", " + item.ToString
            End If
        Next
    End If

    Return items
End Function

jQuery（再次，在标题中） - （这里是DRAGONS！）

$(document).ready(function () {
    $("#autocomplete").autocomplete({
        delay: 0,
        minLength: 0,
        autoFocus: true,
        //This "source:" function is pulled from the jQuery Combobox link above.
        source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response($("#combobox").children("option").map(function () {
                var text = $(this).text();
                if (this.value && (!request.term || matcher.test(text)))
                    return {
                        label: text.replace(
            new RegExp(
                "(?![^&;]+;)(?!<[^<>]*)(" +
                $.ui.autocomplete.escapeRegex(request.term) +
                ")(?![^<>]*>)(?![^&;]+;)", "gi"
//SOMETHING WRONG WITH THE REGEX REPLACE... THE "strong" TAGS ARE COMING THROUGH IN THE DROPDOWN :p
            ), "<strong>$1</strong>"),
                        value: text,
                        option: this
                    };
            }));
        } //END "source:"
        }); //END ".autocomplete"

    $("#combobox").combobox();
//THIS IS WHERE IT'S AT!!
//THE DROPDOWNLIST CONTROL SHOULD BE HIDDEN, BUT THIS BUTTON SHOULD TOGGLE ITS CONTENTS INTO VIEW
//Here is the code used in the "combobox" demo provided on the jQuery UI site, but for some reason
//  it doesn't work with mine. The key difference to note is that they created all their DOM
//  elements and attached the listeners etc. using the "(function ($) { });" form.
    $("#toggle").click(function () {
        // close if already visible
        if (input.autocomplete("widget").is(":visible")) {
            input.autocomplete("close");
            return;
        }

        // work around a bug (likely same cause as #5265)
        $(this).blur();

        // pass empty string as value to search for, displaying all results
        input.autocomplete("search", "");
        input.focus();
    });
});

最后是标记（使用id作为句柄）

<form action="#" method="post">
    <h2>Choose your favorite car</h2>
    <hr />
    <div class="ui-widget"> <!-- Autocomplete Combobox -->
        <asp:DropDownList ID="combobox" runat="server" ClientIDMode="Static"></asp:DropDownList><br />
        <input id="autocomplete" class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" style="margin-right:0;" />
        <button id="toggle" type="button" tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false" style="margin:0 0 0 -7px;">
            <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text" style="padding:0;">&nbsp;</span>
        </button>
    </div>
</form>

为了使它更清晰，组合框ui-widget div中的按钮和输入对象都应链接到asp.net控件。我并不是很难控制，但我已经尝试过两种方式并且都没有成功。

编辑：WOOHOOOO !!我做了以下更改并使数据源正常工作。现在我只需要修复按钮就可以切换下拉列表的视图。

//In the jQuery "source" section I replaced
response(select.children("option").map(function ()
//with
response($("#combobox").children("option").map(function ()

Answer 1

这是我几个月前解决的解决方案，现在有时间发布。在将来，我希望修改此Javascript以支持选项组：）

基本上我把我所有的JS推到一个单独的文件中，并调用我的自定义函数传递DropDownList和TextBox我想创建的每个相应的Combobox。使用DataSourceID将DropDownList提供给SqlDataSource，以便从我的数据库填充它。 ASP.NET将其呈现为＆lt; select＆gt;带＆lt;选项＆gt;的元素ListItem中每个DropDownList的元素。 jQuery UI自动完成插件读取这些＆lt; option＆gt;元素并创建一个隐藏的＆lt; ul＆gt;与＆lt; li＆gt;对于每个对应的＆lt;选项＆gt;在＆lt; select＆gt;中元件。这些项目由第response($(ddl).children("option").map(function () {...行找到。请注意，替换孩子＆＃39;找到＆＃39;发现＆＃39;将返回＆lt; optgroup＆gt;内的选项标签也是。

以下是我的标记，它调用JS函数，然后是JS函数本身：

<!-- Head section -->
<script type="text/javascript">
    function pageLoad() {
        cbsetup("#TextBoxID", "#DropDownBoxID");
    });
</script>

<!-- Body section - SAMPLE COMBOBOX -->
<span>
    <asp:DropDownList ID="DropDownBoxID" runat="server" DataSourceID="SDS"
        DataTextField="Name" DataValueField="ID"></asp:DropDownList>
    <asp:TextBox ID="TextBoxID" runat="server" CssClass="combobox
        ui-autocomplete-input ui-widget ui-widget-content ui-corner-left"></asp:TextBox>
    <!-- I know the button code is particularly nasty, no thanks to jQuery UI.
        I just copy/pasted for the most part -->
    <button id="ButtonID" type="button" tabindex="-1" title="Show All Items"
        class="toggle ui-button ui-widget ui-state-default ui-button-icon-only
        ui-corner-right ui-button-icon" role="button" aria-disabled="false"
        style="margin:0 0 0 -5px; height: 23px;">
        <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
        <span class="ui-button-text" style="padding:0;">&nbsp;</span>
    </button>
</span>

function cbsetup(cb, ddl) {
    try {
        $(cb).unbind();
        $(cb).autocomplete({
            delay: 300,
            minLength: 0,
            autoFocus: true,
            source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response($(ddl).children("option").map(function () {
                    var text = $(this).text();
                    if (this.value && (!request.term || matcher.test(text)))
                        return {
                            label: text.replace(
                                new RegExp(
                                    "(?![^&;]+;)(?!<[^<>]*)(" +
                                    $.ui.autocomplete.escapeRegex(request.term) +
                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                ), "$1" //"<style=\"text-weight:bold;\">$1</style>"
                                ),
                            value: text,
                            option: this
                        };
                }));
            },
            select: function (event, ui) {
                ui.item.option.selected = true;
            },
            change: function (event, ui) {
                if (!ui.item) {
                    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                        valid = false;
                    select.children("option").each(function () {
                        if ($(this).text().match(matcher)) {
                            this.selected = valid = true;
                            return false;
                        }
                    });
                    if (!valid) {
                        // remove invalid value, as it didn't match anything
                        $(this).val("");
                        select.val("");
                        input.data("autocomplete").term = "";
                        return false;
                    }
                }
            }
        });

        $(cb).siblings("button.toggle").click(function () {
            // close if already visible
            if ($(cb).autocomplete("widget").is(":visible")) {
                $(cb).autocomplete("close");
                return;
            }

            // work around a bug (likely same cause as #5265)
            $(this).blur();

            // pass empty string as value to search for, displaying all results
            $(cb).autocomplete("search", "");
            $(cb).focus();
        });
    } /* TRY END */
    catch (e) { jAlert(e.name + ', ' + e.message, 'JS Exception Caught'); }
}

jQuery Combobox带有代码隐藏“Source：”值

1 个答案: