jQuery Magic – Search List Web Part


  1. jQuery Magic – Search List Web Part 1
  2. Overview.
  3. Search Web Part.
  4. See it in action…..
  5. HTML Script 3
  6. Inline Style Sheet 4
  7. jQuery(fication) : Enabling the Magical Library. 4
  8. jQuery: $(document).ready() handler 5
  9. jQuery: The Search() function. 6
  10. jQuery: the processResult() function. 7
  11. References. 7
  12. Summary. 8


After being quite for sometimes now, I am back with another jQuery magic. The search list web part, this is really handy when you have some data in SharePoint that hardly gets updated, rather than opening the list we could directly add a search web part on the home page and get the data.

Search Web Part.

The search web part that we are going to see will look something similar to figure1. I have made the script to search in the Calendar list based on the event location.

Figure 1

This web part can be configured to search on any SharePoint list. Following section of this article will cover the scripts in detail.

See it in action…

I thought of showing it in action to you before we dig deeper onto the code. Follow the instruction carefully.

1. Download the required files from jQuery Magic – Search List Web Part

· jquery.highlight-latest.min.js: This is the jQuery highlight plunging. This is used to highlight the searched terms. Sincere thanks to Johann Burkard for his Highlight Plugin

· searchList.js: This contains the logic to interact with the SharePoint services and render the required controls.

2. Update the references.

3. Upload both the files onto a SharePoint document library.

4. Add a content editor web part à and update the Content Link property to point to searchList.js

Figure 2

5. Click ok and you are done. You will see the search list web part in your page.

HTML Script

Following is the HTML script that is required to render the UI of the search web part. This HTML defines following element in the web part

quickSearchTextBox: Text box to enter the query.

cmdSearch: Command button to initiate search.

resultCount: Div element to show the number of records found from query.

quickSearchResults: Div element to show the result.

I have used the SharePoint style sheet classes to format the UI look similar to SharePoint.

Inline Style Sheet

The inline style sheet classes have been used to format the output and display it in the form of block. Following are the classes in this style sheet.

– .highlight : This class is used to define formatting for highlighting the search terms in the results.

– .ul: this class is used to remove the bullets in the UL element.

– .ul li : This class is used to display the search results in the form of block.

jQuery(fication) : Enabling the Magical Library

To load the jQuery library, I have used the direct link (ajax.googleapis.com). I am not uploading the jQuery library on my SharePoint (I did that in all my previous posts).

In case you want to load jQuery from local SharePoint site you will have to upload jQuery library onto your SharePoint document library and update the SRC parameter in the following code. (Note: You will have to update the {SPURL} for jquery.highlight-latest.min.js file)

jQuery: $(document).ready() handler

$(document).ready() handler is similar to void main() in C J. This script written inside this hander is executed when the entire DOM elements have been loaded.

jQuery script should be written inside ready() handler. Please refer to jQuery Documentation to learn more about writing jQuery script.

I have used ready() handler to associate various event handlers to the controls in my web part. This contains various ways to initiate search operation and other handler to clear search result when “X” is clicked.

Note that to clear the result I have used $(selector).live() handler, this will make sure to attach event handler with “X” button only when it is present in the UI.

jQuery: The Search() function

The search function takes care of talking to the lists.asmx SharePoint web service. This function prepares the soap request with the query and processes the result.

The soap packet contains the CAML query to search the list. It defines following parameter to execute the query:

– listName : Name of the source list.

– Query : Query to execute against the list

– viewFields: Fields that should be returned in the result.

jQuery.ajax() function is used to send the request to the lists web service. The complete attribute specifies the function name that should be executed once this request has been processed. The process result method will receive the resulting xml from the web service call.

jQuery: the processResult() function

The processResult() method is used to generate the resultant HTML script from the web service call result xml file. The role of this method is to parse the xml and get the required HTML.

Please excuse me for the bad formatting (I am really bad in the designing).

Notice the code that we have used to highlight the searched terms in the result set.







I have done very basic formatting to the search results. Be as creative as you can in the processResults() method, use the jQuery UI library to format the output.

We can build some really fantastic application with no server side coding and deployment overheads using jQuery.