JQuery autocomplete from database with asp.net

Question

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.

• http://www.dotnetcurry.com/jquery/1129/jqueryui-autocomplete-using-remote-data (Due to restrictions in my workplace I cant reference external locations)
• http://www.aspsnippets.com/Articles/Implement-jQuery-Autocomplete-using-Web-Service-in-ASP.Net.aspx (Again references external locations)

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

Thanks

Answer 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,

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.