Auto Suggest Search Items in C# using jQuery, Ajax and JSON

This article will focus on the auto suggest searching that we see mainly in product listing websites or in simple word searches in ecommerce.

Prerequisites

Basic knowledge of,

JQuery
Ajax
Json

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

CSS

<link rel="stylesheet"href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Assume that you have a running project with a web form in which there is a search textbox with button. Let's take the following image for your better understanding.

<div role="search" method="get" class="search-form">
<input type="search" class="search-field" placeholder="So, What are you looking for" value="" id="searchresult" title="Search">
<input type="submit" class="search-submit" value="">
</div>

On every key stroke there is a function call and according to that input text auto suggestions are available.

$('#searchresult').keyup(function(event)
{
ptxt = $('#searchresult').val();
$('#searchresult').autocomplete(
{
scroll: true,
selectFirst: false,
autoFocus: false,
source: function(request, response)
{
$.ajax(
{
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../login.asmx/searchresult",
data: "{'prefixtext':'" + ptxt + "'}",
dataType: "json",
success: function(data)
{
response($.map(data.d, function(item)
{
return {
label: item.split('/')[0],
val: item.split('/')[1]
}
}));
},
error: function(result) {}
});
},
minLength: 2,
select: function(event, ui)
{
var vll = ui.item.val;
var sts = "no";
var url = 'Productlist.aspx?prefix=' + ptxt; // ur own conditions
$(location).attr('href', url);
}
});
if(event.keyCode == 13)
{ // this event fired when enter is pressed
url = 'Productlist.aspx?prefix=' + ptxt; // ur own conditions
$(location).attr('href', url);
return false;
}
});
$('#sch').click(function()
{ // this event fired on button click
ptxt = $('#searchresult').val();
url = 'Productlist.aspx?prefix=' + ptxt; // ur own conditions
$(location).attr('href', url);
});
});

The above code covers all the conditions for searching; wether searching a specific item, searching on button click, or searching corresponds to a specific keyword.

login.asmx/searchresult Page - Function is used for auto suggest searching; on every key stroke this function is called and shows you the result.

[WebMethod(EnableSession = true)]
public List < string > searchresult(string prefixtext)
{
List < string > result = new List < string > ();
SqlConnection con = null;
con = (SqlConnection) HttpContext.Current.Session["conn"];
using(SqlCommand cmd = new SqlCommand("select pa.product_id,product_code,product_name,pa.category_id,pa.subcategory_id, where pa.avail_start<=GETDATE() and pa.avail_end>=GETDATE() and (product_code like '%" + prefixtext + "%' or product_name like '%" + prefixtext + "%' or category_name like '%" + prefixtext + "%' or subcategory_name like '%" + prefixtext + "%')", con))
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while(dr.Read())
{
result.Add(string.Format("{0}/{1}", dr["product_name"], dr["product_id"]));
}
con.Close();
return result;
}
}

After this, the page is redirected to the listing page that shows the product list according to your search keyword. On this page load it passes this keyword to your query.

This my first article and I tried to cover all the cases for a search, and I persnally used this searching criteria for e-commerce applications. If anybody has any query don't hesitate to ask, just ask your query in the comments.