SharePoint Search-as-You-Type with jQuery

Already since a long time I’ve been thinking about a web part that would search-as-you-type using SharePoint’s search engine. The idea behind this concept is that while you’re typing a query in the search box, asynchronously the query is already executed and the results are being displayed. Every time the query is changed, the results will be updated dynamically. This will allow users to see the results without going to the Search Results page, and even more: they don’t have to go back to alter their query. In such a scenario you want to avoid full page postbacks of course, so AJAX-techniques have to be used to accomplish this. A while back my first approach would be to make use of ASP.NET AJAX to build the necessary functionality in a web part for example. But during the last couple of weeks I’ve become a really big fan of using jQuery Javascript Library in SharePoint sites, and it happens to be that the search-as-you-type functionality can be created with the help of jQuery very easily. The beauty of this solution is that everything is happening on the client (in the web browser), so there is absolutely no requirement to deploy something to the server (nowadays this seems to be called ‘Assembly Free’).

Before you get too excited; it’s quite obvious that when you use this sample on a production server with lots of users, the SharePoint Search component can be hammered with lots of requests (which can be bad for the performance). So use it wisely! To minimize the impact on the performance of the server, the code will only execute a search query when (by default) three characters are entered, and while the user is still typing no queries are executed at all (there’s a configurable delay).

So how is all of this implemented? Well the idea is to display an HTML textbox in a Content Editor Web Part. Using the jQuery library, an eventhandler is added to that textbox for every keypress. When there are more than three characters (value is configurable) entered in the textbox, jQuery will make an asynchronous call to the Search web services (/_layouts/search.asmx). The resulting found items are displayed in an HTML div element which is positioned right below the textbox, on top of all other HTML elements. The user can select a result using the arrow keys, or by hovering the mouse over a result. When a result is selected by pressing the enter key or by clicking on it, the user is redirected to the corresponding page or document. You can see the code working in a web part in the following animated screenshot.


If you want to try this out yourself, just follow these steps. Once again, there is absolutely nothing you need to tweak and/or deploy on your server. You can do all of this through the web user interface of SharePoint.

  1. Download the code file here.
  2. Add a new Content Editor Web Part, which is available in SharePoint out-of-the-box, to a page.
  3. Modify the newly added web part, use the Source Editor button in the properties task pane to add the downloaded code.
  4. Optionally you can give the web part a meaningful Title in the Appearance group (e.g. Quick Search).

When you check out the code, notice that the first line is a reference to the jQuery library, hosted on Google’s servers. If you plan to use this in production, I’d recommend you to host the jQuery library in your own environment so you have to update the reference with your own URL.

[Update July 3th 2009] If you are using a non-English version of SharePoint, you need to change the script because by default the All Sites Search Scope is being used. On top of the script look for the quickSearchConfig variable and set the scope appropriately (you can look up the name of your Search Scopes in Central Admin/SSP). Also notice that currently using WSS is not supported (the MOSS Search Engine is used)!

var quickSearchConfig = {
    delay: 500,           
    minCharacters: 3,     
    scope: "All Sites",   
    numberOfResults: 15,  
    resultsAnimation: 200,
    resultAnimation: 0    


  • Awesome work Jan,

    Great idea and it looks as if it's something that could hit the majority of sites I'm working with :-)


  • Nice work Jan!! love it!

    can see many implementaions for it around the place on projects i'm working on!

  • Very nice... would like to know if this can be implemented on the default search button? Looks weird with another search box on a page.

  • I love this function and am trying to implement it on WSS3. I changed search.asmx to spsearch.asmx. It pops an error on the server "calling getscopeid from non-office server binary". Is the soap envelope different for search.asmx vs spsearch.asmx? Is there a way to make this work on WSS3?



  • Great feature and is something that has just come up as a requirement in a project I'm working on

  • @Michael - Yeah the WSS search is different. If I have time I'll create a WSS version as well ... :-)

  • It doesn't work in my environment. It's not giving me any results

  • @Sorin: What is "your environment"? Are you using WSS or MOSS? Which browser? Do you see a Javascript error in the Browser?

  • I also get no results on MOSS2007 german. No errors, just 0 results

  • @Lasslo: In german environments change the search scope to "Alle Websites"

  • @Lasslo: Check the update I wrote at the end of the post. Probably you need to change the name of the Search Scope in the script.

  • Is there a way to make it so that the search always includes some term at the begining of the query? (I want "firstname:" to be included at the begining)


  • Never mind got it

    Great web part thanks!

    SCOPE:\"" + quickSearchConfig.scope + "\"" + "firstname:" + query + "

  • Jan, this is a great post and very useful! In fact, everything you do around jQuery is fantastic!

  • Can you *please* update your chart component so views from lists are applied? Currently that feature does not work.

  • It's great article, thanks for all.

  • Great Article and code….However, I am not able to use it in our MOSS environment, it is not pulling any results….Do you have any idea? I am using the full jQuery download code reference locally in our test environment.

    I see no results in this webpart but of course when I search using standard search box it returns results. I see following XML, is it correct?

    SCOPE:"All Sites"IBM "

    Please Help as I want to charm the customer by doing this awesome search implementation.

  • Too good, much awaited functionality from some SharePoint expert :).


  • Very nice done! It works like a charm.
    I want to have 2 checkboxes as additional filters. How can I manages to do that?

  • Thanks a million for your help. I'm searching same thing.


  • Excellent work, Jan (as usual)

  • Is it possible to have this search only one specific list? Say a phone list. How would you do that?

  • Thanks, Jan. This is a life saver. May a thousand camels give birth in your tent, dude!

  • Hi, I have a question.

    Added the web part just fine, added the code, and did a search, and it almost worked. The thing was, each search result simply said "System.String[]". When I scroll down over each "result", it shows the full URL and it in fact goes to a specified page.

    So, it IS doing the search, and it IS taking me to the right page, but the listing below the text box however simply says "System.String[]" for all results.

    I realize this is more than likely something we have wrong on our end with our crawlings or search settings - so any ideas would be appreciated.

    Thanks for the VERY EASY implementation of this feature!


  • Brilliant Jan, thanks so much for sharing. You're a legend!

  • I am trying to implement this on my SharePoint and have it only return items from a certain SharePoint list. We do not have scopes on our SharePoint to drill this code down further and the scope I created on my individual SharePoint would not work with this code. I saw that Arnaud Lacroix had implemented it by filtering the results URL. I tried this but can't seem to figure out literally what this person had typed into the code (I'm not that great at Javascript). Can anybody help me?

  • Instead of All Sites would it be possible to use This List:[List Name]?

  • Bill: I tried that and the drop down appears like it is going to show some results, but it shows nothing other than the "Total Results: 0"..even though I typed in words that appear on that list! However, it does work if I have the scope set to "All Sites" in the code (it just pulls in about 100 other items on all of the other sister SharePoint sites as well), so I know the code is compatible with our version of SharePoint...

Comments have been disabled for this content.