Create an ASP.NET instant search like Google

This is the way I create an instant search like Google in my project. The method is rather simple. By using a Page Method in asp.net and Javascript, we catch the key up event in the search text box and search in database then bind the results to display for user.

And here is what I’ve done:

<script type=”text/javascript”>
function KeyUpCatch(key) {
var runningRequest = false;
var request;
//Abort opened requests to speed it up
var $tbSearch = $(key);
if ($tbSearch.val() == ”) {
$(‘div#results’).html(”);
$(‘div#suggest’).html(”);
document.getElementById(“tdResults”).style.display = “inline”;
return false;
}
if (runningRequest) {
request.abort();
}
runningRequest = true;
request = PageMethods.GetInstantQueue($tbSearch.val(), GetInstantQueueComplete, OnError);
function GetInstantQueueComplete(result) {
if (result != “”) {
document.getElementById(“tdResults”).style.display = “none”;
var l_oResult = JSON.parse(result);
//Suggest
var suggestHtml = ”;
//Instant Bind Result
var resultHtml = ‘<div style=”color:orange; padding-left:20px; padding-top:10px; font-size:15px; font-weight:bold”>Search Results</div>’;
for (var i = 0; i < l_oResult.Howsimple.length; i++) {
var l_oObject = l_oResult.Howsimple[i];
if (i < 4) {
suggestHtml += ‘<div style=”padding-top:5px”>’ + l_oObject.name + ‘</div>’;
}
resultHtml += ‘<div align=”left”>’;
resultHtml += ‘<div style=”padding-top:10px”><a href=”#”>’ + l_oObject.name + ‘</a><hr /></div>’;
resultHtml += ‘<div style=”height:100px;”><img src=”‘ + l_oObject.imgurl + ‘” align=”Left”/>’;
//                resultHtml+= l_oObject.name.replace(/$q.val()/i, ‘<span style=”background-color:yellow;vertical-align:middle”>’+$q.val()+’</span>’)+’</p>’;
resultHtml += ‘<div style=”vertical-align:middle; font-family:Arial;font-size:12px”>&nbsp;&nbsp;’ + l_oObject.des + ‘</div></div>’;
resultHtml += ‘</div>’;
};
$(‘div#results’).html(resultHtml);
$(‘div#suggest’).html(suggestHtml);
}
runningRequest = false;
}
function OnError(result) {
alert(“Error: ” + result.get_message());
}
$(‘form’).submit(function (e) {
e.preventDefault();
});
}
</script>

And this is the code behind functions:

[WebMethod]
public static string GetInstantQueue(string a_sSearch) {
string l_sMessage = “”;
List<CQue> l_oQueues = new List<CQue>();
List<Que> l_oCollection = new List<Que>();
l_oCollection = Que.SelectInstantQueue(a_sSearch);
string l_sResult = Que.Ques2XML(l_oCollection);
XmlDocument l_oXmlRequest = new XmlDocument();
l_oXmlRequest.LoadXml(l_sResult);
if (Common.isSuccessResponse(l_oXmlRequest, out l_sMessage)) {
XmlNode l_oError = (l_oXmlRequest.GetElementsByTagName(“error”))[0];
if (l_oError.InnerText == “none”) {
XmlNodeList l_oSubQueues = l_oXmlRequest.GetElementsByTagName(“que”);
foreach (XmlNode l_oNode in l_oSubQueues) {
l_oQueues.Add(Common.XML2Object<CQue>(l_oNode));
}
}
}
if (l_oQueues.Count() > 0) {
DataTable l_oDataTable = new DataTable();
DataRow l_oDataRow;
l_oDataTable.Columns.Add(new DataColumn(“name”, typeof(String)));
l_oDataTable.Columns.Add(new DataColumn(“imgurl”, typeof(String)));
l_oDataTable.Columns.Add(new DataColumn(“des”, typeof(String)));
for (int i = 0; i < l_oQueues.Count(); i++) {
string l_sThumbnail = GetURL(l_oQueues[i].Thumbnail);
l_oDataRow = l_oDataTable.NewRow();
l_oDataRow[0] = l_oQueues[i].name;
l_oDataRow[1] = l_sThumbnail;
l_oDataRow[2] = l_oQueues[i].description;
l_oDataTable.Rows.Add(l_oDataRow);
}
return GetJSONString(l_oDataTable);
} else
return “”;
//}
}

The GetJSONString function is used to parse the results contain in a DataTable to JSON string

public static string GetJSONString(DataTable l_oDataTable) {
string[] StrDc = new string[l_oDataTable.Columns.Count];
string HeadStr = string.Empty;
for (int i = 0; i < l_oDataTable.Columns.Count; i++) {
StrDc[i] = l_oDataTable.Columns[i].Caption;
HeadStr += “\”" + StrDc[i] + “\” : \”" + StrDc[i] + i.ToString() + “¾” + “\”,”;
}
HeadStr = HeadStr.Substring(0, HeadStr.Length – 1);
StringBuilder Sb = new StringBuilder();
Sb.Append(“{\”Howsimple” + l_oDataTable.TableName + “\” : [");
for (int i = 0; i < l_oDataTable.Rows.Count; i++) {
string TempStr = HeadStr;
Sb.Append("{");
for (int j = 0; j < l_oDataTable.Columns.Count; j++) {
TempStr = TempStr.Replace(l_oDataTable.Columns[j] + j.ToString() + “¾”, l_oDataTable.Rows[i][j].ToString());
}
Sb.Append(TempStr + “},”);
}
Sb = new StringBuilder(Sb.ToString().Substring(0, Sb.ToString().Length – 1));
Sb.Append(“]}”);
return Sb.ToString();
}