Create Editable DropDown using JavaScript

ASP.NET Code: 

<div>

 <asp:TextBox ID="txtTime" runat="server" Style="width: 60px; position absolute"></asp:TextBox>

        <asp:DropDownList ID="ddlTest" runat="server" onchange="DisplayText(this)">

            <asp:ListItem>10:00AM</asp:ListItem>

            <asp:ListItem>11:00AM</asp:ListItem>

            <asp:ListItem>12:00AM</asp:ListItem>

            <asp:ListItem>01:00PM</asp:ListItem>

        </asp:DropDownList>

<asp:Button ID="btnSample" runat="server" Text="Click Me" OnClick="btn_Click" />

JavaScript Code: 

<script type="text/javascript">

        function DisplayText(control) {

            var timeText = document.getElementById('<%=txtTime.ClientID%>');

            timeText.value = control.value;

            timeText.focus();

        }

</script>

    </div>

Here I have a TextBox control and a DropDown control and with little use of CSS placed the TextBox on the top of Dropdown. Now if the user select any value from the Dropdown, populate the same in the TextBox or he can type in his own value in the dropdown. 

Only thing that needs to be taken care of is that you have enough validation on Textbox data to make sure user does not write any garbage value.