Introduction

Editable Auto completed dropdown list is used to enter some value in dropdown and automatically suggest same value in drop down list and user can select value from dropdown list.

Here one thing is that dropdown list selectedIndexChanged event is fire so Programmer can used it as same as dropdown list.

Code Used Jquery , Asp.net with C# to implement it.

Jquery

Note : Put Jquery in <head>  tag

<script type="text/javascript">

     function SearchMethod() {

         var $txt = $('input[id$=TextBox1]');

         var $ddl = $('select[id$=ListBox1]');

         var $items = $('select[id$=ListBox1] option');

 

         $txt.keyup(function () {

             searchDdl($txt.val());

         });

 

         function searchDdl(item) {

             $ddl.empty();

             var exp = new RegExp(item, "i");

             var arr = $.grep($items,

                    function (n) {

                        return exp.test($(n).text());

                    });

 

             if (arr.length > 0) {

                 countItemsFound(arr.length);

                 $.each(arr, function () {

                     $ddl.append(this);

                     $ddl.get(0).selectedIndex = 0;

                 }

                    );

             }

             else {

                 countItemsFound(arr.length);

                 $ddl.append("<option>No Items Found</option>");

             }

         }

 

         function countItemsFound(num) {

             $("#para").empty();

             if ($txt.val().length) {

                 $("#para").html(num + " items found");

             }

 

         }

     }

    </script>

 

Asp.net Coding

<form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

        <asp:TextBox ID="TextBox1" runat="server" onclick="SearchMethod();" ></asp:TextBox>

        <asp:ListBox ID="ListBox1" runat="server" Width="150px" Height="100px">

        <asp:ListItem Text="Alpha" Value="Aα"></asp:ListItem>

    <asp:ListItem Text="Beta" Value="Ββ"></asp:ListItem>

    <asp:ListItem Text="Gamma" Value="Γγ"></asp:ListItem>

    <asp:ListItem Text="Delta" Value="Δδ"></asp:ListItem>

    <asp:ListItem Text="Epsilon" Value="Εε"></asp:ListItem>

    <asp:ListItem Text="Zeta" Value="Ζζ"></asp:ListItem>

    <asp:ListItem Text="Eta" Value="Ηη"></asp:ListItem>

    <asp:ListItem Text="Theta" Value="Θθ"></asp:ListItem>

    <asp:ListItem Text="Iota" Value="Ιι"></asp:ListItem>

    <asp:ListItem Text="Kappa" Value="Κκ"></asp:ListItem>

    <asp:ListItem Text="Lambda" Value="Λλ"></asp:ListItem>

    <asp:ListItem Text="Mu" Value="Μμ"></asp:ListItem>

    <asp:ListItem Text="Nu" Value="Νν"></asp:ListItem>

    <asp:ListItem Text="Xi" Value="Ξξ"></asp:ListItem>

    <asp:ListItem Text="Omicron" Value="Οο"></asp:ListItem>

    <asp:ListItem Text="Pi" Value="Ππ"></asp:ListItem>

    <asp:ListItem Text="Rho" Value="Ρρ"></asp:ListItem>

    <asp:ListItem Text="Sigma" Value="Σσς"></asp:ListItem>

    <asp:ListItem Text="Tau" Value="Ττ"></asp:ListItem>

    <asp:ListItem Text="Upsilon" Value="Υυ"></asp:ListItem>

    <asp:ListItem Text="Phi" Value="Φφ"></asp:ListItem>

    <asp:ListItem Text="Chi" Value="Χχ"></asp:ListItem>

    <asp:ListItem Text="Psi" Value="Ψψ"></asp:ListItem>

    <asp:ListItem Text="Omega" Value="Ωω"></asp:ListItem>

        </asp:ListBox>

        <cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1" DropDownControlID="ListBox1">

        </cc1:DropDownExtender>

    </div>

    </form>

Output :

 Image