Autocomplete search box input field

Question

I am using JQuery for autocompleting the search textbox with my database. The problem rises when I want to access the text of the search textbox in query string since I am using html textbox. To make it in context, either I have to use runat="server" or I can use asp:Textbox but in both the cases my autocompleting feature stops working.

Here is the aspx code:

<div id="search-location-wrapper">
            <input type="text" id="txtSearch" class="autosuggest" />
            <div id="search-submit-container">
            <asp:Button ID="btnSearch" runat="server" Text="Search" 
                      onclick="btnSearch_Click"></asp:Button>
            </div>
</div>

C# Code:

protected void btnSearch_Click(object sender, EventArgs e)
    {
        string location = txtSearch.ToString();  /*Here is the error: txtSearch is not in current context */
        int id = Convert.ToInt32(ddlCategory.SelectedValue);
        string url = "SearchResults.aspx?Id="+id+"&location="+location;
        Response.Redirect(url);
    }

Answer 1

you can use asp:Textbox without stoping jquery:

ASP: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

jQuery selector : $("#TextBox1")

if you have a masterpage or a gridview you can get your element client id by using Inspect Element in your browser..

ASP:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</asp:Content>

jQuery selector : $("#ContentPlaceHolder1_TextBox1")

Answer 2

Your problem is likely just that ASP.NET is changing the ID of your textbox when you put the runat="server" on it. Your jQuery probably has something like:

$("#txtSearch")

Instead, add the runat="server" to your textbox and then change it to:

$("#<%= txtSearch.ClientID %>")

When the page renders, it will put the correct ID in for the textbox.