Skip to main content

How to create a Searchable Dropdown list in Asp.net and Jquery

Here I would like to code how to create the searchable Dropdown list using Asp.net and JQuery .I have used a Plugin to operate this functionality you can download plugin from this LINK  or else you can copy paste the code to your javascript file(.js)

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="Scripts/jquery.searchabledropdown-1.0.8.min.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(document).ready(function () {
   $("select").searchable({
      maxListSize: 200, // if list size are less than maxListSize, show them all
      maxMultiMatch: 300, // how many matching entries should be displayed
      exactMatch: false, // Exact matching on search
      wildcards: true, // Support for wildcard characters (*, ?)
      ignoreCase: true, // Ignore case sensitivity
      latency: 200, // how many millis to wait until starting search
      warnMultiMatch: 'top {0} matches ...',
      warnNoMatch: 'no matches ...',
      zIndex: 'auto'
          });
       });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList ID="myselect" runat="server">
            <asp:ListItem>Select</asp:ListItem>
            <asp:ListItem>venki</asp:ListItem>
            <asp:ListItem>venu</asp:ListItem>
            <asp:ListItem>charles ven</asp:ListItem>
            <asp:ListItem>venuzila</asp:ListItem>
            <asp:ListItem>veron philender</asp:ListItem>
            <asp:ListItem>india</asp:ListItem>
            <asp:ListItem>indianven</asp:ListItem>
            <asp:ListItem>vesta</asp:ListItem>
        </asp:DropDownList>
    </form>
</body>
</html>

Comments

  1. Good working functionality using jquery to Searchable DropDownList

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. How do I use it with master pages?

    ReplyDelete
    Replies
    1. Instead of
      $("select").searchable({

      Use
      $("#<%=DrpCarpenter.ClientID%>").searchable({

      Delete
  4. Its Not working with Master Content Page Please Solve.

    ReplyDelete
    Replies
    1. Instead of
      $("select").searchable({

      Use
      $("#<%=DrpCarpenter.ClientID%>").searchable({

      Delete
  5. Thank you, It's working properly. But there is only one problem. I have done validation on text box using Jquery 3.3.1 in tool-tip. And know Jquery 3.3.1 and Jquery 1.8.3 has collision with each other, one of the two is working at a time. Can you please give me a solution on this.

    ReplyDelete
  6. Fantastic product!
    If you style the div element the control is in to "display:inline-block;" the dropdown can be displayed on the same line as a label. Just a thought.

    ReplyDelete
  7. I get this error:

    TypeError: this.size is not a function

    Does anyone know why?


    ReplyDelete
  8. Will it work only with specific version jquery 1.8.3 or the later version like jquery-3.2.1.min.js, please respond

    ReplyDelete
  9. After postback the search functionality not working. after postback dropdown working as like normal dropdown.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Hi,

    SCRIPT5007: Unable to get value of the property 'length': object is null or undefined
    Error in IE9 browser

    Thanks
    Ashish Pal

    ReplyDelete
    Replies
    1. my code is not showing any workiing even not any error what should i do? please help me :-(

      Delete
    2. Hi,

      Open IE browser(Version 9) and Press F12 tab Console and see error
      (Make two Drop down list selected index change)

      Thanks
      Ashish Pal

      Delete
  12. Searching in dropdownlist works too slow. please provide solution for this.

    ReplyDelete
  13. my code is not working properly:-(

    ReplyDelete
  14. Hi,

    Please check below

    SCRIPT5007: Unable to get property 'length' of undefined or null reference
    WebResource.axd (172,17)

    Thanks
    Ashish Pal

    ReplyDelete
  15. Hi,

    lost my time but get success
    You can use this and working on(IE 9) all drop down list in aspx page and html page also


    $(document).ready(function () {
    $("select").searchable();
    });
    $(function () {
    $("select").change(function () {
    if ($.browser.msie && parseInt(jQuery.browser.version) >= 9)
    this.fireEvent && this.fireEvent('onchange') || $(this).change();
    $("select").searchable();
    });
    });


    Thanks
    Ashish Pal

    ReplyDelete
  16. Hi,

    TypeError: this.size is not a function

    Does anyone know why?

    ReplyDelete
  17. What is the licence type of this product?

    ReplyDelete

Post a Comment