0

Hi I have a text field on my web form and would like to utilise the jquery autocomplete functionality to show a list of possible values when the users starts typing.

I have looked at loads of tutorials online and I understand the basic ones that have an array of values in the javascript. However I would like the values available to my text box to be defined by an SQL query.

I have browsed stackoverflow and all the answers seem to use php, but I am building my site using asp.net and C# and I have absolutely no php experience.

I have tried working through the following examples online but have come to dead ends for one reason or another.

Does anybody know of a good step by step tutorial that can guide me through the process?

Thanks

1

1 Answer 1

1

You haven't provided that what you tried, so assuming and creating a sample as per your requirement. I have taken a good reference from here

So here we go:-

Firstly, you need to create a database for your data to be fetched from. for that you need to create a connection string. The below one is the sample in which I have used the Northwind database

<connectionStrings>
  <addname="constr"connectionString="Data Source = .\SQLExpress;       
   Initial Catalog = Northwind; Integrated Security = true"/></connectionStrings>

Secondly, we will also be needing a handler in this case which will handle your request of AutoComplete

<%@ WebHandler Language="C#" Class="Search_CS" %>


using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;

public class Search_CS : IHttpHandler {


public void ProcessRequest (HttpContext context) {
    string prefixText = context.Request.QueryString["q"];
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager
                .ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "select ContactName from Customers where " +
            "ContactName like @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            cmd.Connection = conn;
            StringBuilder sb = new StringBuilder();
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    sb.Append(sdr["ContactName"])
                        .Append(Environment.NewLine);
                }
            }
            conn.Close();
            context.Response.Write(sb.ToString());
        }
    }
}

public bool IsReusable {
    get {
        return false;
    }
}}

After that, you need to call the javascript function in your aspx page, so that your autocomplete part will work.

<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#<%=txtSearch.ClientID%>").autocomplete('Search_CS.ashx');
    });      
</script>
<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    </div>
    </form>

That's the thing which you need to implement.

Below is the image it will look like,

Jquery autocomplete Image

Also see the plugin documentation related.

https://api.jqueryui.com/autocomplete/

Jquery autocomplete category.

https://jqueryui.com/autocomplete/#categories

If you get stuck in these, kindly let us know. We will be glad to help you out.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.