For almost all implementations of SharePoint, search is a very crucial part. Most of search features come OOTB, and you need to customize it only if are not satisfied with a generic use scenario. No need to mention that first you need to crawl the content, of course.
Since all above sounds good, there are also sort of requirements that you lead to perform search against list items in your site collection. Most of the time you need to type all the word and perform a search to find what you are looking for. In such scenarios, wildcard search is becoming a challange as well.
In this post, I’ll try to show you a very straight-forward search implementation using CAML, JavaScript and Content Editor Web Part. We’ll first create a Contacts list. Then, customize a DataFormWebPart so that its data source will be responsible from our CAML queries. Finally, using a Content Editor Web Part and JavaScript, we’ll perform search against FirstName, LastName, FullName, and Company fields.
Let’s start…
- 1. Create Contacts list
- 2. Add sample contacts.
- 3. Using SharePoint Designer, create a blank aspx page and name it “Results.aspx“.
- 4. From Data Source Library, drag and drop Contacts list to the form of the page you just created.
- 5. This will insert a DataFormWebPart into form of Results.aspx. Now, we need to edit columns so that First Name, Last Name, Full Name and Company is included.
- 6. Also, let’s change the layout to “two-column repeating form with border“
- 7. At the end of Results.aspx html code add the following script.
<SharePoint:CssLink runat=”server”/>
<SharePoint:ScriptLink language=”javascript” name=”core.js” Defer=”true” runat=”server”/>
<script type=”text/javascript”>
function FrameGoToLink(elm) {
if (elm.href==null) return;
var targetUrl=elm.href;
var ch=elm.href.indexOf(“?”) >=0 ? “&” : “?”;
var srcUrl=ch+”Source=”+window.top.location;
var targetUrl=elm.href+srcUrl;
window.top.location = targetUrl;
}
</script>
- 8. Add CAML Query details. Also, don’t forget to update contacts list id in the following code with contacts list id of the site you create.
a. Add Data Sources
<DataSources>
<SharePoint:SPDataSource runat=”server” DataSourceMode=”List” SelectCommand=”<View><Query>{_1}{SearchQS}{_2}{SearchQS}{_3}{SearchQS}{_4}{SearchQS}{_5}<OrderBy><FieldRef Name=’Title’/><FieldRef Name=’FirstName’/></OrderBy></Query></View>” UseInternalName=”True” ID=”Contacts1″><SelectParameters><WebPartPages:DataFormParameter ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}” Name=”ListID”></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”SearchQS” PropertyName=”ParameterValues” DefaultValue=”r” Name=”SearchQS”></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_1″ PropertyName=”ParameterValues” DefaultValue=”<Where><Or><Or><Or><BeginsWith><FieldRef Name=’Title’/><Value Type=’Text’>” Name=”_1″></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_2″ PropertyName=”ParameterValues” DefaultValue=”</Value></BeginsWith><BeginsWith><FieldRef Name=’FirstName’/><Value Type=’Text’>” Name=”_2″></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_3″ PropertyName=”ParameterValues” DefaultValue=”</Value></BeginsWith></Or><BeginsWith><FieldRef Name=’Company’/><Value Type=’Text’>” Name=”_3″></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_4″ PropertyName=”ParameterValues” DefaultValue=”</Value></BeginsWith></Or><BeginsWith><FieldRef Name=’FullName’/><Value Type=’Text’>” Name=”_4″></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_5″ PropertyName=”ParameterValues” DefaultValue=”</Value></BeginsWith></Or></Where>” Name=”_5″></WebPartPages:DataFormParameter>
</SelectParameters><UpdateParameters><WebPartPages:DataFormParameter ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}” Name=”ListID”></WebPartPages:DataFormParameter>
</UpdateParameters><InsertParameters><WebPartPages:DataFormParameter ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}” Name=”ListID”></WebPartPages:DataFormParameter>
</InsertParameters><DeleteParameters><WebPartPages:DataFormParameter ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}” Name=”ListID”></WebPartPages:DataFormParameter>
</DeleteParameters>
</SharePoint:SPDataSource>
</DataSources>
b. Add Parameter Bindings
Note that below, we define our CAML query WHERE clause.
<ParameterBindings>
<ParameterBinding Name=”dvt_apos” Location=”Postback;Connection”/>
<ParameterBinding Name=”UserID” Location=”CAMLVariable” DefaultValue=”CurrentUserName”/>
<ParameterBinding Name=”Today” Location=”CAMLVariable” DefaultValue=”CurrentDate”/>
<ParameterBinding Name=”ListID” Location=”None” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}”/>
<ParameterBinding Name=”SearchQS” Location=”QueryString(Search)” DefaultValue=”r”/>
<ParameterBinding Name=”_1″ Location=”QueryString(ReturnAll)” DefaultValue=”<Where><Or><Or><Or><BeginsWith><FieldRef Name=’Title’/><Value Type=’Text’>”/>
<ParameterBinding Name=”_2″ Location=”QueryString(ReturnAll)” DefaultValue=”</Value></BeginsWith><BeginsWith><FieldRef Name=’FirstName’/><Value Type=’Text’>”/>
<ParameterBinding Name=”_3″ Location=”QueryString(ReturnAll)” DefaultValue=”</Value></BeginsWith></Or><BeginsWith><FieldRef Name=’Company’/><Value Type=’Text’>”/>
<ParameterBinding Name=”_4″ Location=”QueryString(ReturnAll)” DefaultValue=”</Value></BeginsWith></Or><BeginsWith><FieldRef Name=’FullName’/><Value Type=’Text’>”/>
<ParameterBinding Name=”_5″ Location=”QueryString(ReturnAll)” DefaultValue=”</Value></BeginsWith></Or></Where>”/>
</ParameterBindings>
- 9. Then, save page as “Results.aspx“.
- 10. Go to home page and add a Content Editor Web Part.
- 11. Edit CEWP properties and add the following to its Source Editor.
<div style=”height:400px;”>
<script type=”text/javascript”>
var timeout = -1;
function searchChange(textbox) {
var text = textbox.value;
if (timeout != -1) clearTimeout(timeout);
timeout = setTimeout(“commitSearch(‘” + text + “‘)”, 400);
}
function commitSearch(text) {
var frame = document.getElementById(“contactFrame”);
if (text == “”) frame.src = “/Results.aspx?ReturnAll=Yes”;
else frame.src = “/Results.aspx?Search=” + text;
}
</script>
<div class=”ms-listdescription”>Use the text field below to search for contacts by First Name, Last Name, Full Name, or Company.</div>
<input type=”text” style=”border:1px gray solid;” id=”contactSearch” name=”contactSearch” onkeyup=”searchChange(this);”/><br/>
<iframe id=”contactFrame” style=”width:100%; height: 100%; margin-bottom:-30px; padding-bottom:30px;” src=”/Results.aspx?ReturnAll=Yes” scrolling=”auto” frameborder=”no”>
</iframe>
</div>
- 12. That’s all. Now you can test. Go to homepage and type something in search textbox. You’ll realize that results will be updated as you type.
zieglers
