Building auto-complete feature with jQuery is easy and you can build this in no time. It’s your wish if you want to use ADO.NET or EF (LINQ) to get this done, it works great for all. The sample application I build is using both ADO.NET and EF. So let’s begin up getting files under one hood.
Use the below live links for jQuery auto-complete and CSS.
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
You can also download these files and use them in your project, if you are planning to run your application offline. For this demonstration, I have downloaded the files. I am using both ADO.NET and LINQ to auto-complete with jQuery auto-complete pug-in.
Starting up with ADO.NET, as we were/are using this for so many years now and therefore there should be no problem for anyone using it. Simple page behind code to get the full list of countries in the world (I hope I have all of them) and seperate each country name with a ‘|’ pipe symbol so I can split countries name and set it to the text box for auto-complete.
public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
SqlCommand cmd;
SqlDataReader dr;
public string Listcountries;
private string countryName()
{
StringBuilder sb = new StringBuilder();
cmd = new SqlCommand("Select country_name from Country order by country_name", con);
con.Open();
dr = cmd.ExecuteReader();
while (dr.Read())
{
sb.Append(Convert.ToString(dr[0] + "|"));
}
return Convert.ToString(sb);
}
protected void Page_Load(object sender, EventArgs e)
{
Listcountries = countryName();
}
}
Done with code behind and now only requires few lines of client script on the page to get the auto-complete running.
<script type="text/javascript">
$(document).ready(function () {
var cc = '<%=Listcountries%>'.split("|");
$("#autoText").autocomplete(cc);
});
</script>
The same can be done with LINQ but the jQuery script part will be the same.
public partial class AutocompleteLINQ : System.Web.UI.Page
{
DeveloperDBEntities db = new DeveloperDBEntities();
public IQueryable countries;
public string Listcountries;
protected void Page_Load(object sender, EventArgs e)
{
countries = from c in db.Countries select c;
foreach (Country cobj in countries)
{
Listcountries += cobj.Country_Name + "|";
}
}
}
Just for your ease to use this project as it is, I have included the SQL scripts for the country table. Hope this helps you in building another great or a part of your application.
Download: JqueryAutoComplete.zip (210.73 kb)