SharePoint Contextual Search – Updated
In a recent project created a page that features several Data View Web Parts pulling information from multiple lists within the site to create a dashboard-like experience. The stakeholders also wanted to be able to quickly search within each list, so I decided to include a custom search box at the top of each data view web part.
At first I thought I could use my custom search box that I wrote about in a previous post. The problem with that solution is that the JavaScript I created only works for a single search box because the ID is hard-coded into the functions. Therefore I modified the function to accept an ID attribute so it would accommodate multiple search boxes on the same page.
Updated Script and HTML
Here is the updated script:
// Search for the terms when the Search button is clicked function customSearch(inputId,type,site,scope) { var searchUrl = site + "/_layouts/OSSSearchResults.aspx?" // Or "/_layouts/SearchResults.aspx?" if WSS 2003 or SP2010 Foundation var searchTerm = "&k=" + document.getElementById(inputId).value; var listParams = "&cs=This%20" + type + "&u=" + scope; window.location.href = searchUrl + searchTerm + listParams; } // Initiate the customSearch function when the Enter key is pressed function searchKeyPress(buttonId,e) { // look for window.event in case event isn't passed in if (window.event) { e = window.event; } if (e.keyCode == 13) { document.getElementById(buttonId).click(); } }
In order for the new functions to work properly, each search button must include the ID of the text input in the onclick attribute. Also, each text input must include the ID of the search button in the onkeypress attribute:
<input id="searchBox1" onkeypress="searchKeyPress('searchButton1',event);" name="searchBox1" type="text" />; <input id="searchButton1" onclick="customSearch( 'searchBox1', 'List', 'http://server/site', 'http://server/site/lists/projects' );" name="searchButton1" type="button" value="Search" />
When using more than one search box on a page, give each text input and button input a unique ID, and include those IDs in the appropriate onclick and onkeypress attributes.
As I mentioned in my previous article, you also need to specify the type of search context, the URL of the site for the search results to appear on, and the URL of the list or site context.
<input id="searchBox1" onkeypress="searchKeyPress('searchButton1',event);" name="searchBox1" type="text" />; <input id="searchButton1" onclick="customSearch( '[id of text input]', '[Type of search context - Site or List]', '[URL of site to display results]', '[URL of site or list/library to search]' );" name="searchButton1" type="button" value="Search" />
Parameters Explained
- On the text box
<input>
, the first parameter is the ID of the search button for that text box. The second parameter (‘event’) is the keypress event and should be left alone. - On the button
<input>
, the first parameter is the ID of the text box<input>
. You can give the text box input any ID that you want, but you must specify that ID as the first parameter when calling the customSearch function from the onkeypress attribute of the search button. - Next is the type of contextual search. Searches can be scoped to a specific site, or they can be scoped to a specific list/library. Use either “Site” or “List” to set the type of context for the search (lists and libraries both use “List”).
- Then comes the URL of the site to display search results on. This is a really cool feature in SharePoint because it lets you perform cross-site searches. You can have your custom search box display search results for a list that’s on a completely different sub-site, and those results can be displayed on the search results page for the current site, which can make the user experience better, particularly if the sites are branded differently. This even works across collections (at least in my test environment).
- The last parameter is the URL of the site or list/library to search within. If your search scope is an entire site, enter the base URL for the site (do not include a specific page such as “default.aspx” or “Pages/default.aspx”). If your search scope is a specific list or library, enter the base URL for that list or library (do not include a specific page such as “AllItems.aspx” or “Forms/AllItems.aspx”).
Examples
The following examples will use a fictional Marketing sub-site located at “http://myserver/departments/marketing/
.”
Search the
list that is located on the sub-site:<input id="searchBoxAnnouncements" onkeypress="searchKeyPress('searchButtonAnnouncements',event);" name="searchBoxAnnouncements" type="text" /> <input id="searchButtonAnnouncements" onclick="customSearch( 'searchBoxAnnouncements', 'List', 'http://myserver/departments/marketing/', 'http://myserver/departments/marketing/lists/announcements/' );" name="searchButtonAnnouncements" type="button" value="Search" />
Search the entire
sub-site:<input id="searchBoxMarketing" onkeypress="searchKeyPress('searchButtonMarketing',event);" name="searchBoxMarketing" type="text" /> <input id="searchButtonMarketing" onclick="customSearch( 'searchBoxMarketing', 'Site', 'http://myserver/departments/marketing/', 'http://myserver/departments/marketing/' );" name="searchButtonMarketing" type="button" value="Search" />
Search the
list of the sub-site from the sub-site, and display the results on a search results page within the sub-site:<input id="searchBoxTasks" onkeypress="searchKeyPress('searchButtonTasks',event);" name="searchBoxTasks" type="text" /> <input id="searchButtonTasks" onclick="customSearch( 'searchBoxTasks', 'List', 'http://myserver/departments/humanresources/', 'http://myserver/departments/marketing/tasks/' );" name="searchButtonTasks" type="button" value="Search" />
Final Thoughts
All of the above examples can be implemented by substituting your own values for the parameters. The code can then be added to a Content Editor Web Part or embedded within a Data View Web Part on your page, which gives you a lot of flexibility in terms of placement and styling.
I’ve used this technique many times over the past few months to create a better user experience by “embedding” the search box into the dvt_1.empty template that is displayed when a Data View Web Part does not have any rows to display. Typically this happens when the DVWP uses filters and the user selects filter criteria that aren’t matched by any of the list items. This way the user can enter a simple text search and see if that works rather than having to try one filter after another.
Comments
Comments are closed