Search and highlight - Client vs. Server side?

Question

Hi everyone,

I have an MVC web application that shows ~ 2000 lines "divs", and I want to make the user able to search and highlight the keywords. I tried using jQuery plugins for this but the performance was really bad and IE got almost hung! So, I was wondering if this is the best way to do it? and If am not getting a faster version I'd rather do it on the server "AJAX call" and re-render the whole lines again - this way at least the user won't feel the browser is getting hung!

Any recommendations?

Thanks!

Answer 1

You should do this via an AJAX call to the server, providing the highlight keyword string and returning the divs, something like this:

$("#content").load('page.aspx', {'keywords':$('#searchBox').val()}); 

In this approach your server would return only the divs (with highlighting!) based on the passed keywords string, and this would populate the <div id="content"> with them.

The highlighting on the client is cheap, but searching for what to highlight is extremely expensive in javascript, that's a lot of DOM crawling going on. Doing this via the server on a timeout would be the best approach, so it doesn't do it as they're typing every keystroke, something like this:

$('#searchBox').unbind('keyup').keyup(function() {
  clearTimeout($.data(this, 'timer'));
  var wait = setTimeout(function() {
    $("#content").load('page.aspx', {'keywords':$('#searchBox').val()}); 
  }, 150);
  $(this).data('timer', wait);
});

This would perform a server callback, but only 150ms after the user stops typing. I find this a comfortable interval, but adjust as needed...or bind the function directly to the click event of something...whatever best suits your interface :)