поиск выпадающего меню не работает

Question

В приведенном ниже коде я разместил код javascript и asp.net, это раскрывающийся список для поиска, который не работает в раскрывающемся списке asp.net и работает в html. Я попытался использовать html-тег, он работает, а не в asp.net textbox.Pls, помогите мне решить проблему.

ЯШ:

<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.

Если вы JS-код находится внутри ASPX-сайте, вы можете попробовать этот код

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

В противном случае вам придется найти другой способ, чтобы JS знать фактический ClientID вашего контроля (например, писать с serveride в скрытое поле, используйте имя класса, чтобы идентифицировать выпадающее меню и т. д.)

Answer 2

Это зависит от того, где вы находитесь, это выпадающее меню, так как если вы проверите элемент, то идентификатор этого всплывающего окна asp будет меняться на основе на основе, которую вы используете.

Было бы разумно, если вы идете на класс вместо ID

Eg: - вы можете дать 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 затем использовать его

$ ("# < % = combobox.ClientID%> "). combobox();