Thursday, July 2, 2009 6:18 AM Jan Tielens

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    
};

Filed under: ,

Comments

# re: SharePoint Search-as-You-Type with jQuery

Thursday, July 2, 2009 8:58 AM by Tobias Zimmergren

Awesome work Jan,

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

Cheers

# re: SharePoint Search-as-You-Type with jQuery

Thursday, July 2, 2009 10:04 AM by Brian H. Madsen

Nice work Jan!! love it!

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

# re: SharePoint Search-as-You-Type with jQuery

Thursday, July 2, 2009 11:47 AM by Ryan

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.

# re: SharePoint Search-as-You-Type with jQuery

Thursday, July 2, 2009 11:53 AM by Michael

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?

Thanks,

-Michael-

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 12:23 AM by Chris Howell

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

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 1:56 AM by Jan Tielens

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

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 2:55 AM by Sorin

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

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 3:59 AM by Jan Tielens

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

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 5:04 AM by Lasslo

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

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 5:39 AM by Johannes

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

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 5:40 AM by Jan Tielens

@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.

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 6:44 AM by Callum

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)

Thanks

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 3, 2009 6:59 AM by Callum

Never mind got it

Great web part thanks!

<QueryText language='en-US' type='STRING' >SCOPE:\"" + quickSearchConfig.scope + "\"" + "firstname:" + query + "</QueryText>

# re: SharePoint Search-as-You-Type with jQuery

Saturday, July 4, 2009 3:22 AM by Karine bosch

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

Greetz,

Karine

# re: SharePoint Search-as-You-Type with jQuery

Monday, July 6, 2009 5:47 PM by D

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

# re: SharePoint Search-as-You-Type with jQuery

Tuesday, July 7, 2009 3:54 PM by ilker

It's great article, thanks for all.

# re: SharePoint Search-as-You-Type with jQuery

Friday, July 10, 2009 6:23 PM by Shalin Parmar

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?

"

<Context> <QueryText language='en-US' type='STRING' >SCOPE:"All Sites"IBM</QueryText> </Context> "

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

# re: SharePoint Search-as-You-Type with jQuery

Monday, July 13, 2009 5:57 AM by Dhawal Mehta

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

Thanks,

Dhawal

# re: SharePoint Search-as-You-Type with jQuery

Monday, July 20, 2009 7:29 AM by L.A

Very nice done! It works like a charm.

I want to have 2 checkboxes as additional filters. How can I manages to do that?

# re: SharePoint Search-as-You-Type with jQuery

Tuesday, July 28, 2009 10:05 AM by Dewan

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

X

Dewan

# re: SharePoint Search-as-You-Type with jQuery

Wednesday, August 5, 2009 8:58 AM by Geir

Excellent work, Jan (as usual)

# re: SharePoint Search-as-You-Type with jQuery

Friday, August 7, 2009 12:56 PM by Scott

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

# re: SharePoint Search-as-You-Type with jQuery

Wednesday, August 12, 2009 2:06 PM by Ricky Singh

Hi Jan,

i know this question is different from this topic but it is related to Search so thought you might be able to help me out. i am trying to display "manager" field in people search but without any success. i am able to display other custom fields like phone ext but manager field may be due to field type person, is not showing up. Could you please help me out with this.

Thanks

# re: SharePoint Search-as-You-Type with jQuery

Friday, August 14, 2009 8:11 AM by Toadmyster

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

# re: SharePoint Search-as-You-Type with jQuery

Tuesday, August 25, 2009 1:56 PM by SharepointTool

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!

SPT

# re: SharePoint Search-as-You-Type with jQuery

Wednesday, September 2, 2009 10:22 AM by Ryan

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

# re: SharePoint Search-as-You-Type with jQuery

Tuesday, September 29, 2009 1:18 PM by Lauren

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?  

# re: SharePoint Search-as-You-Type with jQuery

Tuesday, September 29, 2009 2:56 PM by Bill

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

# re: SharePoint Search-as-You-Type with jQuery

Tuesday, September 29, 2009 11:18 PM by Lauren

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...