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 |
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…
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
- Upload this web part or paste this script to Content Editor Web Part
- Modify the following two lines with your SharePoint URLs and Contacts list name
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
