Two weeks ago Peter emailed me the following question:

I am trying to get your PhoneBook search as you type to work with a Links list and have not been able to make the edits that are needed for it to work.

Yes, it is possible to customize this solution to work with any list you wish, but you need to tweak the code a bit. I am using very powerful  Javascript API for the SharePoint webservices by Darren Johnstone that allows you to do anything.

In order to make this to work you need to customize:

–       Query for retrieving results (CAML)

–       Part of the code that renders results

In both cases you need to know a bit of Javascript, XML, HTML and CAML. We will be using my original script as starting point. Download it to your Notepad or SharePoint Designer.

New CAML Query

The first thing we need to change is CAML query. I prefer to be as efficient as possible and I am using CAML Query Builder (if you are not CAML quru this is the best way).

Create a CAML query (figure 1) for your Links list (it searches for data in two fields: URL and Notes). Hit Test button and it will display results from your list (figure 2). Adjust the query as needed.

Figure 1 Figure 2
Figure 1 Figure 2

As a result I got the one below. But you can customize it to add some additional fields you might have.

<Query>

<Where>

<Or>

<Contains>

<FieldRef Name=’URL’ />

<Value Type=’URL’>Sharepoint</Value>

</Contains>

<Contains>

<FieldRef Name=’Comments’ />

<Value Type=’Note’>SharePoint</Value>

</Contains>

</Or>

</Where>

</Query>

Implementing new query

Now we need to implement the changes back to the original web part. You have to combine the new query with the rest of the code. After I implemented the changes the query in the code looks like this (You must also update viewfields part, it is responsible for configuring the set of fields to be returned by query)

var items = lists.getListItems(

contactsListName,   // listName

”,         // viewName

‘<Query><Where><Or><Contains><FieldRef Name=”URL” /><Value Type=”URL”>’ + query + ‘</Value></Contains><Contains><FieldRef Name=”Comments” /><Value Type=”Note”>’ + query + ‘</Value></Contains></Or></Where></Query>’,  // query

‘<ViewFields><FieldRef Name=”URL”/><FieldRef Name=”Notes”/></ViewFields>’,  // viewFields

30,  // rowLimit

‘<QueryOptions> <IncludeMandatoryColumns>TRUE</IncludeMandatoryColumns> </QueryOptions>’  // queryOptions

);

You also have to change the results part to match your query.

results  += “<li><a style=’color:white’ href='” + rows.item(i).getAttribute(‘ows_URL’) +  “‘>” + rows.item(i).getAttribute(‘ows_URL’) + “</a></li>”;

And you are ready to go…

List Search as you type

Conclusion

You can search as you type with any list type. You just need to modify the CAML query and results display to match the format of your list. Have fun.

Deploying

var sharePointSite = “http://<sharepoint_site_url_with_contacts_list>”; //e.g. “http://intranet”

var contactsListName = “Contacts”; // enter your List name here

  • (Optionally) Update JQuery location if you would like to use it from another location

One Comment

  1. Tamara Says

    Toni, this is great! made it for my contact list and it looks awesome!

    trying to apply it to Document library but i’m not that familiar with scripting. can you please give me some advices on how to edit the code to work with doc library?

    Thnx, Tamara.

Leave a Reply