Creating a Simple Search Function Using LINQ in C#.NET And Highlighting Results With JavaScript

One of the many things that almost every website or be it web application needs is a simple search functionality. It is as simple as pie and yet when I first needed to make one it had me a bit stumped. So today I will show how to make a very simple, but effective site search.

Presuming that you are underway of making your web application and that you are familiar with basic C# and LINQ, the actual code is very simple.

// Code for searching “customer” table with “f_name” or “l_name” containing search string.

public static IQueryable  searchCustomers(string value)

{

myDataClass db = new myDataClass();

var q = from c in db.customers

where c.f_name.Contains(value) || c.l_name.Contains(value)

select c;

return q;

}

Simple as pie. This will return an object of type IQueryable which contains entries of type “customer” table where the first name or last name matches the given search string. I find that using IQueryable is a much better approach to data access definitions since it provides me with the full functionality of LINQ in my page’s code behind file. Also, IQueryable types bind right away to any ASP.NET grid controls you might want to use to display the results.

Now another useful functionality I like to give is result-highlighting. I don’t like colored highlights, just a simple bold on the part of the text that matches my search. Especially useful if you are searching through a long text body of some kind. For this i advise using Javascript. Js does the job just as well without adding to server load or extending time on page load. To do this we need only 2 things, the search string and the id of the container in which we are displaying search results.

// Code for highlighting the relevant text in search results

<script type=”text/javascript”>

function highlightOnLoad() {

if (/s\=/.test(window.location.search))

{

var searchString = getSearchString();

// Starting node, parent to all nodes you want to search

var resultContainer = document.getElementById(“search-results-container”);

var searchValues = searchString.split(‘|’);

for (var i in searchValues) {

// The regex is the most important part, it allows the text within tag declarations to not be considered

var regex = new RegExp(“>([^<]*)?(“+searchValues[i]+”)([^>]*)?<”,”ig”);

highlightText(resultContainer, regex, i);

}

function getSearchString() {

// Strip url of other text

var searchString = window.location.search.replace(/[a-zA-Z0-9\?\&\=\%\#]+s\=(\w+)(\&.*)?/,”$1″);

return searchString.replace(/\%20|\+/g,”\|”);

}

function highlightText(container, regex, termid) {

var temp = container.innerHTML;

// Add a span with class of ‘highlighted’

container.innerHTML = temp.replace(regex,’>$1<span class=”highlighted”>$2</span>$3<’);

}

window.OnLoad = highlightOnLoad;

</script>

The CSS code for highlighted portions of text :

<style type=”text/css”>

span.highlighted {
background-color: #161616;
font-weight: bold;
}

</style>

So as you can see in a matter of 10 minutes, you can add a very nice (yet simple) search functionality to all your websites.