February 23rd, 2010SharePoint Search on Steroids Part 2 — Using JQuery and Web Services
This is a continuation of a series about creating a robust search U.I. for SharePoint.
Connecting the U.I. to Search Results
We now have our user control embedded on the master page of our site. First we should have the U.I. forwarding the user to the search results upon clicking “Search” or submitting a query.
This is simple enough. In reality, we are just redirecting them to the appropriate search results page and placing their query in a query string parameter:
//This would be for a general query
Response.Redirect("/SearchCenter/Pages/results.aspx?k=" + txtSearch.Text.Replace(" ", "%20"));
//This would be for a people search
Response.Redirect("/SearchCenter/Pages/peopleresults.aspx?k=" + txtSearch.Text.Replace(" ", "%20") + "&s=People");
//This would be for a custom scope
Response.Redirect("/SearchCenter/Pages/Results.aspx?k=" + txtSearch.Text.Replace(" ", "%20") + "&s=This isMyCustomScope");
You can create a U.I. that stores the selected search type into a session variable. I created tabs upon the top of the search. If the user clicks on “People”, for instance, I store a session variable of the value “people” and direct them to the appropriate page (peopleresults.aspx) upon the search click or search submit event:
Each tab stores a value in a session variable. The variable redirects the user to the appropriate search result page.
Enhancing search with JQuery and WebServices
We first need to integrate JQuery into our SharePoint site. I imagine there are many ways to do this, however, this approach seemed the most straightforward to me:
1. Download the JQuery code. It’s also available on the Microsoft CDN, but for an Intranet site, I prefer offering it from our own servers.
2. Open up SharePoint Designer and create a folder in the root called “_scripts” and place the jquery.js file there.
3. Open up your masterpage in SharePoint Designer and in the <head> section add:
<script type="text/javascript" src="/_scripts/jquery-1.3.2.js"></script>
4. You’ll also want to download the autocomplete plugin from JQuery. This plugin allows us to present suggestions (very much like Google) as the user begins to type their query.
5. Follow steps 2 and 3 to add your autocomplete.js file
For brevity, I won’t go into specifics about how the autocomplete js file works. There are plenty of other sources on the Internet. However, in order for our suggestions to be produced dynamically we do need to connect our user control to a web service. In SharePoint this may not be as easy as it seems. I chose to integrate the web service code into my existing site. I’m sure there are many other methods, but this seemed the most straight-forward way:
1. Add a “New Item…” to your Visual Studio Web Project (the same project that contains your user control)
2. Choose “Web Service” to create a new .asmx file.
3. Write the necessary web method(s) to provide data to your autocomplete script (We’ll cover this in more detail in Part 3)
Now, when we compile our web project, the .dll will include code for our web service as well. The .dll will go into our bin folder of our site, we will also need to create a space for our .asmx file. I found that creating a folder in the location of your site’s file system is easiest (\\<front-end web server>\<drive-letter>$\inetpub\wwwroot\wss\VirtualDirectories\<site name and port>).
I created a folder called “_webservices” and placed the .asmx file in there.
I then used a ScriptManagerProxy control inside the user control to create a script proxy to be used by the autocomplete jquery plugin:
<asp:ScriptManagerProxy ID="SMP" runat="server"> <Services> <asp:ServiceReference Path="/_webservices/<web service name>.asmx" InlineScript="false" /> </Services> </asp:ScriptManagerProxy>
You will need to give “Everyone” or “Domain Users” access to this folder because the service actually provides a .js file to be embedded into your site at load time.
We now have the “plumbing” in order. Let’s review:
1. We have a user control on the master page for all of our U.I. elements
2. We’ve added the jquery and autocomplete .js files, using SharePoint Designer, to a “_scripts” folder in the root. We created references to those files in the <head> section of the master page.
3. We added a web service (.asmx) item to our Visual Studio project and added the necessary code to make our autocomplete plugin work.
4. The user control creates a proxy to connect to a web service that is stored in our site’s folder structure (\\<front-end web server>\<drive-letter>$\inetpub\wwwroot\wss\VirtualDirectories\<site name and port>\_webservices\webservice.asmx)
The next step will be to capture and store search queries so that we can provide things like tag clouds and suggestions.
Coming up… SharePoint Search on Steroids Part 3 – Storing Search Queries