Creating a Custom Advanced Search by Building Strings with JavaScript

This week, we're privileged to get a lesson in creating custom searches from John Ross, a consultant for SharePoint911 and an active member of the SharePoint community.

Creating a Custom Advanced Search by Building Strings with JavaScript
by John Ross

The search capabilities of Microsoft Office SharePoint Server (MOSS) are one of the most powerful pieces of functionality the product has to offer. Search is often one of the primary reasons that companies purchase MOSS. Typically a company will install and configure MOSS and one of the first things they do is run a basic search query to see what happens and the search results normally cause “oohs” and “ahhs,” but eventually someone is going say something like, "Can we make search do...?"

Creating a custom search solution would probably require that a developer write code that leverages the SharePoint object model, right? Not necessarily! Let’s first take a look at how search works and we’ll do this by running a sample query on the word “SharePoint:”



What happened? When we told MOSS to execute the query, it redirected us to the search results page and built a query string that defined the search term as well as the scope. The exact string looks like this:

http://www.domain.com/Search/Results.aspx?k=SharePoint&s=All%20Sites

On the search results page, there is a web part called “Search Core Results” which will look at that query string and show the corresponding results. You’ll notice that the search term shows up after the “k” variable and the scope shows up after the “s” variable in the query string. If you were to send this URL to a colleague it would work for them as well. Of course the results might be slightly different because MOSS search is smart enough to only show you results that you have access to – but I digress. In addition to the search query and the scope, MOSS can also use the value of a specific metadata property to search. For example if you only wanted to search the property “title,” you could type in something like this:



This would result in a query string that looks like this:

http://www.domain.com/Search/Results.aspx?k=title%3Astrings&s=All%20Sites

Using this syntax in the search box tells MOSS to only search for the word “strings” in the title metadata property of documents, allowing for very specific search results. By simply manipulating URL strings, we are able to create custom search behavior similar to what's available via the Advanced Search page but do it much easier. For example, what if we wanted to create that title search above but didn’t want to explain to our end users how to manipulate the query to return the desired results? All we’ve got to do is create a solution that allows us to manipulate URL strings, which we can do using the Content Editor Web Part (CEWP) with some basic HTML and JavaScript:

1. First, add a Content Editor Web Part to a page.

2. Next, place the page in Edit Mode and select to modify the CEWP. Select to edit the contents of the web part using the Source Editor, which will allow us to write our HTML and JavaScript.

3. Add the following code to the CEWP and save it.

Title:





As noted in the comments, this code assumes that you’d want to use the out-of-the-box search center created when a publishing site collection is created. However, it's possible to create your own search results page by using the same web parts used by the results page--because that’s all the results page really is-- just a bunch of web parts. Put the page in edit mode and take a look for yourself:



Using this technique opens up a ton of possibilities for creating custom searches that are user friendly. Perhaps you have a list where you're capturing employee contact information, and you want to build an employee search. You could simply create multiple fields, and when you press the search button the values can be concatenated into the desired search string. The only difference in this case is that you would need to know what the query string looks like. In this case we are going to search on the property Name and City:



The query string will look something like this:

http://www.domain.com/Search/ results.aspx?k=Name%3A%22John%20Ross%22%20City%3A%22Orlando%22

Notice that we’ve used quotation marks after each property; this is important because a search query that uses multiple properties won't work without the quotation marks. Additionally, you’ll see that MOSS modifies the spaces, colons, and quotation marks by changing them to the HTML equivalent. As long as your query string recreates the same type of syntax that you would enter in the search box, MOSS will handle the URL Encoding for you. All that would be necessary would be to create another HTML input box, make sure it's being passed to your function from the button, and then add the additional value to the string you're building. It would look something like this:

Name:
City:





The answer to creating custom searches didn’t require custom coding (the JavaScript was borrowed from one of the countless examples out on the Web); all it took was just a little creativity with using what’s available out of the box.

John Ross is a Senior SharePoint Consultant for SharePoint911. John has over seven years of experience implementing solutions for clients ranging from small businesses to Fortune 500 companies as well as government organizations. John has experience working with all project phases from analysis to implementation and has been involved with a wide range of SharePoint solutions that include public facing Internet sites, corporate intranets, and extranets. Additionally, John is an active member of the SharePoint community and is an esteemed speaker on a wide range of topics. John also maintains a blog focused various SharePoint topics. He is also a co-author of The Ted Pattison Group's SPG301: SharePoint Planning and Governance.