SharePoint Search-as-You-Type with jQuery
Note from Mark Miller: I’ve been watching Jan Tielens’ work with jQuery for a while now and am in complete awe of some of the things he has accomplished. I’m very pleased to be able to cross-post his article on the “Search-as-You-Type” web part.
Guest Author: Jan Tielens
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.
- Download the code file here.
- Add a new Content Editor Web Part, which is available in SharePoint out-of-the-box, to a page.
- Modify the newly added web part, use the Source Editor button in the properties task pane to add the downloaded code.
- 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
};
Guest author, Jan Tielens, is .NET Architect and Trainer at U2U (http://www.u2u.be). He focuses on Information Worker technologies including SharePoint and Office.
Jan is Microsoft Most Valuable Professional (MVP) for Office SharePoint Server and he is well known in the SharePoint community as the author of the SmartPart. You can read his weblog at http://weblogs.asp.net/jan and follow him via twitter at http://twitter.com/jantielens.
- SharePoint Search-as-You-Type with jQuery
id like to implement this to use eisting search box on sharepoint site. any tips? or to replace the existing search box with this
BRAVISSIMO!!!!
HS^2!
My search stalls out without returning anything. I suspect it has something to do with Search web services. Will this work in WSS or just for MOSS?
Thanks for the great article!
AE
same issue as allyn.. im using wss 3.0
This is great information and hope you have more coming. I am using MOSS and it is working. I added it to a couple sites for ‘testing’. Hope to get back positive feedback. I would also like to replace the existing search box. Waiting for instructions :)
Fantastic job. The web part works like a charm! Great “Whizz Bang!” factor, which goes a long way in getting people to accept using SharePoint.
Thanks!!
I have moss environment but could not get this to work as the search is not returning any results where as if i use the same keyword in the inbuilt search box it returns the results.Is there any thing else i need to do?
> Also notice that currently using WSS is not supported (the MOSS Search Engine is used)!
Last sentence in the article… not available for WSS, yet. — Mark
This works great for the drop-down, but the search button at the right of the box doesn’t do anything.
Any suggestions?
Thanks Mark… I thought the MOSS requirement was for the non-English language issue.
Darn… another !&!%@*#&^@& reason to move to MOSS.
Allyn
Hi – Great tool – works great for All Sites. I’m trying to change the scope variable to “This Site” or “This Site: ” but neither works. How do I know what value to use for the scope I want?
should have said “This Site: site name here” – stripped out my brackets…
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.
Awesome code! This worked out of the box with our WSS/MS Express Search environment. MOSS not needed.
You have to make sure that the ‘Shared Services Provider’ is set up. You have to set up ‘Crawler’ in MOSS for this to work. Hope this helps.
Hi. Works great. Another clean simple feature.
One thing I would like that I’ve yet to see, is a Search that goes through the text on a webpage and highlights the matches. Ctrl + f Is way to much for most users ;)
Anything out there like that?
Tony – Waldek produced that in a previous article: http://www.endusersharepoint.com/?p=951 — Mark
I am still not able to get this working can someone please help? I want to use this very badly…..the search works fine and shows results but when I use this JQuery serarch-as-you-type it shows no results……
Hi,
My search results are very inconsistent.
Sometimes it fetches record for one user, but not for another in the same browser.
Any ideas what might be wrong?
Hey,
Fantastic stuff, its very simple to integrate. I love it buddy, This may be used at many places :)
Hi,
Is there any OOTB way so that I can execute an SQL query which has a variable input?
The variable input should be dynamic and should take value from a textbox on the page.
Thanks in Advance,
Sid
Very cool.
We have modified it in such a way that it now replaces standard search on all pages and fixes a couple of other issues as well.
See http://www.muhimbi.com/blog/2009/07/automatically-add-search-as-you-type-to.html
Very nice!
A quick mod to enable stemmed search results:
Add a variable named ‘enableStemming’ to the quickSearchConfig variable on around line 9, i.e.:
var quickSearchConfig = {
enableStemming: true,
delay: 500,
minCharacters: 3,
scope: “All Sites”,
numberOfResults: 15,
resultsAnimation: 200,
resultAnimation: 0
}
And then around line 164 look for the xml element in the queryXML variable:
And change to:
Voila! Stemmed search results.
Hia,
Brillient script and perfect for my content type searches, however the only reason I can’t use it is because it doesn’t clear unless you delete the search word.
This will confusing for users (took me a minute and I implemented it lol).
Is there a way of auto clearing search result by clicking on the screen or something, which is what users generally do to clear a pop up (or have a close button?).
If this could be achieved I’d even pay for it ;-)