Simple Interactive Search with jQuery and ASP.Net MVC

Doug Lampe · 2010-12-21

Google now has a feature where the search updates as you type in the search box.  You can implement the same feature in your MVC site with a little jQuery and MVC Ajax.  Here's how:

  1. Create a javascript global variable to hold the previous value of your search box.
  2. Use setTimeout to check to see if the search box has changed after some interval.  (Note: Don't use setInterval since we don't want to have to turn the timer off while Ajax is processing.)
  3. Submit the form if the value is changed.
  4. Set the update target to display your results.
  5. Set the on success callback to "start" the timer again.  This, along with step 2 above will make sure that you don't sent multipe requests until the initial request has finished processing.

Here is the code: