SharePoint search-as-you-type with jQuery

I remember the first time I saw Google Suggest, it would run the search in real-time and provide a dropdown with possible queries. One of my teammates always joked about making software with one button that would automatically know what you wanted to do. I showed it to him and suggested that Google was getting closer.

I’ve been working on my presentation for CapArea.NET about jQuery and SharePoint and I knew I would have to demo this search as you type code. The proof of concept was created by Jan Tielens, and the solution was fleshed out by the team at muhimbi. It overrides the default search box and starts returning results as you type. It’s super cool and it’s all HTML and JavaScript, it’s not a web part, and there are no assemblies. Just add this to your master page, and you get a search upgrade.

While I was testing it I realized one thing. This search is using the keyword search. That’s not too helpful since no results get returned until you spell out the entire keyword. I ended up using the LIKE operator against the Name and Description to get a much more helpful search that brings up results while you are still spelling the keywords. It required two changes to the javascript.

  1. Changing the query to use the FullText rather than the keyword query.
  2. Changing the jQuery selectors as the return values are different for the different query types.

In addition to this I changed the path to jQuery to load from the 12 hive, and I added some protection against SQL injection in the query.

Update 9/26/2011: David Lozzi has extended this code (and code contributed by several others) to create the Search as You Type Project on CodePlex. I would encourage all of you to take advantage of his hard work with this great project.

Leave a Reply

Name *
Email *