Using the JQuery Select2 with dropdown lists

• Download select2 style sheets and java scripts. Add them in the header of the page.

[code]
    <script src="../Scripts/select2.js"></script>
    <script src="../Scripts/select2.min.js"></script>
    <link href="../Styles/select2.css" rel="stylesheet" />
    <link href="../Styles/select2.min.css" rel="stylesheet" />

<asp:DropDownList ID="ddlSupplier" runat="server" CssClass="form-control" Width="200px" AutoPostBack="True"></asp:DropDownList>
[/code]

• Add the following java script to apply the autocomplete option.

[code]
    <script>
        function pageLoad() {
            $("#" + "<%=ddlSupplier.ClientID%>").select2({
                placeholder: "Select Supplier",
                allowClear: true
            });
        }
    </script>
[/code]

• When the dropdownlist is in a gridview, some changes should be done in the above javascript.

[code]
<script>
    function pageLoad() {
                  $("#<%=GridView1.ClientID %> select[id*='ddlItem']").select2({
            placeholder: "Select an Item",
            allowClear: true
        });
    }
</script>
[/code]

[code]
<asp:TemplateField HeaderText="Item">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("ItemName") %>'></asp:TextBox>
    </EditItemTemplate>
    <FooterTemplate>
        <asp:DropDownList ID="ddlItem" runat="server" AutoPostBack="True" CssClass="form-control input-sm" OnSelectedIndexChanged="ddlItem_SelectedIndexChanged" Width="200px">
        </asp:DropDownList>
    </FooterTemplate>
    <ItemTemplate>
        <asp:Label ID="lblItem" runat="server" Text='<%# Bind("ItemName") %>'></asp:Label>
    </ItemTemplate>

</asp:TemplateField>
[/code]

Links: Using the Select2 JQuery Plugin with Bootstrap 3

           Select2 3.5.3