Question

在下面的代码我已经放置了javascript代码和asp.net它是一个可搜索的下拉列表，它不能在asp.net下拉列表中工作并使用html。我试过使用html标签它是工作，而不是在asp.net textbox.Pls帮助我解决问题。

JS：

 <script>
     (function ($) {
         $.widget("custom.combobox", {
             _create: function () {
                 this.wrapper = $("<span>")
          .addClass("custom-combobox")
          .insertAfter(this.element);

                 this.element.hide();
                 this._createAutocomplete();
                 this._createShowAllButton();
             },

             _createAutocomplete: function () {
                 var selected = this.element.children(":selected"),
          value = selected.val() ? selected.text() : "";

                 this.input = $("<input>")
          .appendTo(this.wrapper)
          .val(value)
          .attr("title", "")
          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
          .autocomplete({
              delay: 0,
              minLength: 0,
              source: $.proxy(this, "_source")
          })
          .tooltip({
              tooltipClass: "ui-state-highlight"
          });

                 this._on(this.input, {
                     autocompleteselect: function (event, ui) {
                         ui.item.option.selected = true;
                         this._trigger("select", event, {
                             item: ui.item.option
                         });
                     },

                     autocompletechange: "_removeIfInvalid"
                 });
             },

             _createShowAllButton: function () {
                 var input = this.input,
          wasOpen = false;

                 $("<a>")
          .attr("tabIndex", -1)
          .attr("title", "Show All Items")
          .tooltip()
          .appendTo(this.wrapper)
          .button({
              icons: {
                  primary: "ui-icon-triangle-1-s"
              },
              text: false
          })
          .removeClass("ui-corner-all")
          .addClass("custom-combobox-toggle ui-corner-right")
          .mousedown(function () {
              wasOpen = input.autocomplete("widget").is(":visible");
          })
          .click(function () {
              input.focus();

              // Close if already visible
              if (wasOpen) {
                  return;
              }

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

             _source: function (request, response) {
                 var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                 response(this.element.children("option").map(function () {
                     var text = $(this).text();
                     if (this.value && (!request.term || matcher.test(text)))
                         return {
                             label: text,
                             value: text,
                             option: this
                         };
                 }));
             },

             _removeIfInvalid: function (event, ui) {

                 // Selected an item, nothing to do
                 if (ui.item) {
                     return;
                 }

                 // Search for a match (case-insensitive)
                 var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
                 this.element.children("option").each(function () {
                     if ($(this).text().toLowerCase() === valueLowerCase) {
                         this.selected = valid = true;
                         return false;
                     }
                 });

                 // Found a match, nothing to do
                 if (valid) {
                     return;
                 }

                 // Remove invalid value
                 this.input
          .val("")
          .attr("title", value + " didn't match any item")
          .tooltip("open");
                 this.element.val("");
                 this._delay(function () {
                     this.input.tooltip("close").attr("title", "");
                 }, 2500);
                 this.input.data("ui-autocomplete").term = "";
             },

             _destroy: function () {
                 this.wrapper.remove();
                 this.element.show();
             }
         });
     })(jQuery);

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

asp.net：

<asp:DropDownList ID="combobox" runat="server">
       <asp:ListItem Value="hai"></asp:ListItem></asp:DropDownList>

Answer 1

我猜这部分是你的问题

$(function () {
     $("#combobox").combobox();
     $("#toggle").click(function () {
         $("#combobox").toggle();
     });
 });

呈现的HTML中的ID将与经典asp.net的工作方式和呈现html的ID不同。

如果您的JS代码在aspx站点内，您可以尝试使用此代码

    $(function () {
     $("#<%=combobox.ClientID %>").combobox();
     $("#toggle").click(function () {
         $("#<%=combobox.ClientID %>").toggle();
     });
 });

否则你必须找到让JS知道控件的实际ClientID的另一种方法（例如，将它从服务器端写入隐藏字段，使用类名来识别下拉列表等）。

Answer 2

这取决于你在哪个下拉列表，因为如果你检查元素，那么asp下拉列表的id将根据你正在使用的框架而改变。

如果你去上课而不是ID

那将是明智的

例如： - 你可以给cssClass ='MyTest'像

<asp:DropDownList runat="server" ID="ComboBox" CssClass="MyTest">
                                </asp:DropDownList>

然后将jquery更改为“。”而不是“＃”喜欢

$(function () {
     $(".MyTest").combobox();
     $("#toggle").click(function () {
         $(".MyTest").toggle();
     });
 });

另外，你甚至可以去clientId。

希望这有帮助，

亲切的问候，

Raghu.M

Answer 3

获取asp.net服务器端控件的id然后使用它

$（“＃＆lt;％= combobox.ClientID％＆gt;”）。combobox（）;

Answer 4

您可以使用此依赖项，它可以正常工作，并且完全自定义，您甚至可以将其用于多选。 custom_searchable_dropdown。 https://pub.dev/packages/custom_searchable_dropdown

搜索下拉列表无效

4 个答案: