Home > ASP.Net, Jquery, Linq > JQuery Autocomplete With Linq

JQuery Autocomplete With Linq


Hi all

try this example to make Autocomplete with Linq using Jquery

in previous post i provide an example to show how to do this AutoComplete from Database using JQuery

Step1 :- First download the following files jquery.autocomplete.js and jquery.autocomplete.css

Step2 :- Open VS2008 and create a new website

Step3 :- add new Linq to SQL DataContext  and name it “Northwind.dbml” and add Products table in it

Step4 :- Add new Web Page and Drage TextBox control from Toolbox inside page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Autosugeestion.aspx.cs" Inherits="Autosugeestion" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>
<link href="CSS/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtSearch.ClientID%>").autocomplete('Search.ashx');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
Enter Product :- <asp:TextBox ID="txtSearch" runat="server" Width="190"></asp:TextBox>
</div>
</div>
</form>
</body>
</html>

Step5 :- Add new ASP.Net Generic Handlers file and name it “Search.ashx”


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

using System;
using System.Web;
using System.Linq;

public class Search : IHttpHandler {

public void ProcessRequest (HttpContext context)
{
string param = HttpContext.Current.Request.Params["q"];
NorthwindDataContext dbml = new NorthwindDataContext();
var query = from products in dbml.Products
where products.ProductName.StartsWith(param)
select products;
foreach (var item in query)
{
context.Response.Write(item.ProductName + Environment.NewLine);

}
}

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

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Jquery, Linq
  1. markmanxp
    December 23, 2012 at 2:42 pm

    Love this! Was exactly what I was looking for. Easy to setup and use. Works great using the js files you provided. Unfortunately, jquery’s autocomplete has been replaced with jQueryUI’s version. If I try to use autocomplete jQueryUi I get an error on the page load ”
    Error: cannot call methods on autocomplete prior to initialization; attempted to call method ‘Search.ashx'”. Hopefully you have some answer’s on why this is the case and if there is a fix that can be implemented so I can continue to use your LINQ method describe here with the latest version of autocomplete. Thanks

  2. December 26, 2012 at 10:30 pm

    I don’t see how or understand how when is called on line 11 –
    string param = HttpContext.Current.Request.Params[“q”];
    where it is utilized in the linq query. In your other article “https://yasserzaid.wordpress.com/2009/12/05/autocomplete-from-database-using-jquery/” you at least plug in the value using a like statement in your sql query. What am I missing?

    • yasserzaid
      January 3, 2013 at 8:44 am

      @markmanxp : Sorry i modified my post to filter with what you entered
      and about your question of using param = HttpContext.Current.Request.Params[“q”];
      this to pass what user typed in Textbox to filter the result according to it
      hope you got me and if there is any questions you can ask me

      Thank you.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: