DropDownList AutoComplete using jQuery select2 plugin in ASP.Net

Last Reply on Oct 24, 2017 04:43 AM By Rose

Posted on Oct 24, 2017 02:12 AM

 

<asp:DropDownList ID="ddl1" runat="server" CssClass="form-control js-example-placeholder-single" ToolTip="Select "></asp:DropDownList>

<script type="text/javascript">
$(".js-example-placeholder-single").select2({
placeholder: "Select ",
allowClear: true
});
</script>
<link rel="stylesheet" type="text/css" href="/Scripts/Select/select2.min.css" />
<script src="/Scripts/Select/jquery.js"></script>
<script src="/Scripts/Select/select2.min.js"></script>

select2 search is not working in the above code

Kindly help

Posted on Oct 24, 2017 02:16 AM

Hi Rose,

I have created sample. Refer the below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".js-example-placeholder-single").select2({
                placeholder: "Select",
                allowClear: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddl1" Width="300px" runat="server" CssClass="form-control js-example-placeholder-single"
            ToolTip="Select ">
            <asp:ListItem Text="Alice Mutton" Value="Alice Mutton"></asp:ListItem>
            <asp:ListItem Text="Aniseed Syrup" Value="Aniseed Syrup"></asp:ListItem>
            <asp:ListItem Text="Boston Crab Meat" Value="Boston Crab Meat"></asp:ListItem>
            <asp:ListItem Text="Camembert Pierrot" Value="Camembert Pierrot"></asp:ListItem>
            <asp:ListItem Text="Carnarvon Tigers" Value="Carnarvon Tigers"></asp:ListItem>
            <asp:ListItem Text="Chai" Value="Chai"></asp:ListItem>
            <asp:ListItem Text="Chang" Value="Chang"></asp:ListItem>
            <asp:ListItem Text="Chartreuse verte" Value="Chartreuse verte"></asp:ListItem>
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

Screenshot


Posted on Oct 24, 2017 04:43 AM

Hello sir,

Thank you soo much for your Quick response.

that my dropdown is in the the modal and My issue is solved by deleting tabindex=-1 attribute from modal.

I refered this link,

https://github.com/select2/select2-bootstrap-theme/issues/41

once again Thanks Alot...!!!