<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Dave Cavins &#187; search</title>
	<atom:link href="http://davecavins.com/tag/search/feed/" rel="self" type="application/rss+xml" />
	<link>http://davecavins.com</link>
	<description>web design, SharePoint customization &#38; random stuff</description>
	<lastBuildDate>Tue, 27 Dec 2011 14:22:18 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Simple Search Box with Radio Buttons</title>
		<link>http://davecavins.com/2011/08/simple-search-box-with-radio-buttons/</link>
		<comments>http://davecavins.com/2011/08/simple-search-box-with-radio-buttons/#comments</comments>
		<pubDate>Mon, 22 Aug 2011 14:26:43 +0000</pubDate>
		<dc:creator>davecavins</dc:creator>
				<category><![CDATA[General SharePoint]]></category>
		<category><![CDATA[SharePoint Design]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[search]]></category>
		<category><![CDATA[SharePoint]]></category>

		<guid isPermaLink="false">http://davecavins.com/?p=605</guid>
		<description><![CDATA[So lets say you want users to be able to selectively search content from 3 (or more) different lists (The lists may or may not be on the same site). Out of the Box there is not an easy way to do this. Having the user browse to each list or library and search it [...]


Related posts:<ol><li><a href='http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/' rel='bookmark' title='Adding Suggestions to the Sharepoint search box'>Adding Suggestions to the Sharepoint search box</a></li>
<li><a href='http://davecavins.com/2009/10/suggestions-foto-the-sharepoint-search-box-part-2/' rel='bookmark' title='Adding Suggestions to the Sharepoint search box : Part 2'>Adding Suggestions to the Sharepoint search box : Part 2</a></li>
<li><a href='http://davecavins.com/2009/09/filter-by-date-range/' rel='bookmark' title='Filter Lists by Date Range'>Filter Lists by Date Range</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>So lets say you want users to be able to selectively search content from 3 (or more) different lists (The lists may or may not be on the same site). Out of the Box there is not an easy way to do this.</p>
<ul>
<li>Having the user browse to each list or library and search it specifically</li>
<li>Use the site wide search which will return results from the whole site. </li>
</ul>
<p>You could setup search scopes for each list but if you manage a large number of sites this could become a lot of work to maintain. </p>
<p>So the plan is to build one search box with radio buttons that will let you choose what list or scope you want to query.  Here is how I did it. </p>
<p>The HTML</p>
<p>Here is the basci HTML I used. I have a container div I use for styling, the input box, 3 radio buttons, and a search link.  Things to notice:</p>
<ul>
<li>On the container div I have included javascript to call a function named &#8216;submitSearch&#8217; if the user presses the enter key.  See line 1.</li>
<li>Instead of a submit button I am using a regular link that calls the same function as above. </li>
</ul>
<pre class="brush: xml; title: ; notranslate">&lt;/pre&gt;
&lt;div id=&quot;multisearch&quot; onkeydown=&quot;javascript:if (event.keyCode == 13) submitSearch();&quot;&gt;&lt;input id=&quot;search_txt&quot; title=&quot;Enter search words&quot; type=&quot;text&quot; name=&quot;k&quot; maxlength=&quot;200&quot; /&gt;
&lt;label for=&quot;all&quot;&gt;
&lt;input id=&quot;all&quot; type=&quot;radio&quot; name=&quot;radiou&quot; value=&quot;http://myurl.com/sites/SharePoint&quot; checked=&quot;checked&quot; /&gt;
All
&lt;/label&gt;
&lt;label for=&quot;posts&quot;&gt;
&lt;input id=&quot;posts&quot; type=&quot;radio&quot; name=&quot;radiou&quot; value=&quot;http://myurl.com/sites/SharePoint/Lists/Tasks&quot; /&gt;
Tasks
&lt;/label&gt;
&lt;label for=&quot;disc&quot;&gt;
&lt;input id=&quot;disc&quot; type=&quot;radio&quot; name=&quot;radiou&quot; value=&quot;http://myurl.com/sites/SharePoint/Lists/Discussion&quot; /&gt;
Discussions&lt;/label&gt;&lt;/div&gt;
&lt;pre&gt;
Search
</pre>
<h2>JavaScript</h2>
<p>Because we cannot include an actual form in the page and I did not want to use a page viewer web part for this solution we will use JavaScript to submit the values from the search box.  I am using  jQuery as usual.  To keep it simple the function checks the value of the selected radio button, if it is the url of the current site the search is run using the &#8216;This Site&#8217; scope. Otherwise the search uses the scope that is defined by the value of the radio button and the &#8216;This List&#8217; scope.</p>
<p>See the comments in the code for more information.</p>
<pre class="brush: jscript; title: ; notranslate">
// include jquery
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;&gt;// &lt;![CDATA[

// ]]&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; language=&quot;JavaScript&quot;&gt;// &lt;![CDATA[
function submitSearch()
{
// If the all radio button is selected search everything on the site
if(the_value = &lt;a href=&quot;http://myurl.com/sites/SharePoint&quot;&gt;http://myurl.com/sites/SharePoint&lt;/a&gt;){
//set the search terms to the value ofthe text box
queryVal = $('#search_txt').val();
the_value = $('input[name=&quot;radiou&quot;]:checked', '#multisearch').val();
//build the url with the url of the search page, the search terms and search scope and browse to it
window.parent.location='search.aspx?k=' + queryVal + '&amp;u=' + the_value + '&amp;cs=This Site';
}
else {
// get the search terrm from the text box
queryVal = $('#search_txt').val();
// Use the radio button value as the url for the search scope
the_value = $('input[name=&quot;radiou&quot;]:checked', '#multisearch2').val();
//build the url with the url of the search page, the search terms and search scope and browse to it
window.parent.location='search.aspx?k=' + queryVal + '&amp;u=' + the_value + '&amp;cs=This List'; } };
// ]]&gt;&lt;/script&gt;
</pre>
<h2>Using the query string</h2>
<p>Like most search engines SharePoint uses the query string to pass the information you want to search for.  A quick look at the search results page tells us what we need to send in order to get the results we need.  The rest is just simple JavaScript. In the code above you can see how I built the query string using the various elements.</p>
<div id="attachment_619" class="wp-caption alignnone" style="width: 450px"><a href="http://davecavins.com/wp-content/uploads/2011/08/search.jpg"><img class="size-full wp-image-619" title="search" src="http://davecavins.com/wp-content/uploads/2011/08/search.jpg" alt="" width="440" height="210" /></a><p class="wp-caption-text">Disceting the Query String</p></div>
<h2>All together now</h2>
<pre class="brush: xml; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; language=&quot;JavaScript&quot;&gt;// &lt;![CDATA[
 function submitSearch() { if(the_value = &quot;http://myurl.com/sites/SharePoint&quot;){ queryVal = $('#search_txt').val(); the_value = $('input[name=&quot;radiou&quot;]:checked', '#multisearch').val(); window.parent.location='search.aspx?k=' + queryVal + '&amp;u=' + the_value + '&amp;cs=This Site'; } else { queryVal = $('#search_txt').val(); the_value = $('input[name=&quot;radiou&quot;]:checked', '#multisearch2').val(); window.parent.location='search.aspx?k=' + queryVal + '&amp;u=' + the_value + '&amp;cs=This List'; } };
// ]]&gt;&lt;/script&gt;&lt;/pre&gt;
&lt;div id=&quot;multisearch&quot; onkeydown=&quot;javascript:if (event.keyCode == 13) submitSearch();&quot;&gt;&lt;input id=&quot;search_txt&quot; title=&quot;Enter search words&quot; type=&quot;text&quot; name=&quot;k&quot; maxlength=&quot;200&quot; /&gt;
&lt;label for=&quot;all&quot;&gt;
&lt;input id=&quot;all&quot; type=&quot;radio&quot; name=&quot;radiou&quot; value=&quot;http://myurl.com/sites/SharePoint&quot; checked=&quot;checked&quot; /&gt;
All
&lt;/label&gt;
&lt;label for=&quot;posts&quot;&gt;
&lt;input id=&quot;posts&quot; type=&quot;radio&quot; name=&quot;radiou&quot; value=&quot;http://myurl.com/sites/SharePoint/Lists/Tasks&quot; /&gt;
Tasks
&lt;/label&gt;
&lt;label for=&quot;disc&quot;&gt;
&lt;input id=&quot;disc&quot; type=&quot;radio&quot; name=&quot;radiou&quot; value=&quot;http://myurl.com/sites/SharePoint/Lists/Discussion&quot; /&gt;
Discussions&lt;/label&gt;&lt;/div&gt;
Search
</pre>
<h2>Search Results</h2>
<p>In the code above you will notice I am passing the search term to a page called search.aspx. This is a page I created by adding the search web parts. I used my own search results page because I wanted to have control of the look and feel. You could also send the results to a search center site or the out of the box search page (_layouts/OSSSearchResults.aspx), this might be different in 2010.</p>
<h2>Useful Resouces</h2>
<ul>
<li><a title="Getting Started with jQuery" href="http://www.sharepointhillbilly.com/archive/2011/07/28/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-started.aspx" target="_blank">Getting started with jQuery</a></li>
<li><a title="How to create Custom Search and Results page" href="http://www.metaoption.com/pages/ContentReader.aspx?eqs=9C6CB26346D187F57D7E44E63BE6EC07B460E04D484E258910385B4CDC9A3D25" target="_blank">How to create Custom Search and Results page</a></li>
</ul>


<p>Related posts:<ol><li><a href='http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/' rel='bookmark' title='Adding Suggestions to the Sharepoint search box'>Adding Suggestions to the Sharepoint search box</a></li>
<li><a href='http://davecavins.com/2009/10/suggestions-foto-the-sharepoint-search-box-part-2/' rel='bookmark' title='Adding Suggestions to the Sharepoint search box : Part 2'>Adding Suggestions to the Sharepoint search box : Part 2</a></li>
<li><a href='http://davecavins.com/2009/09/filter-by-date-range/' rel='bookmark' title='Filter Lists by Date Range'>Filter Lists by Date Range</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://davecavins.com/2011/08/simple-search-box-with-radio-buttons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adding Suggestions to the Sharepoint search box : Part 2</title>
		<link>http://davecavins.com/2009/10/suggestions-foto-the-sharepoint-search-box-part-2/</link>
		<comments>http://davecavins.com/2009/10/suggestions-foto-the-sharepoint-search-box-part-2/#comments</comments>
		<pubDate>Wed, 28 Oct 2009 16:07:37 +0000</pubDate>
		<dc:creator>davecavins</dc:creator>
				<category><![CDATA[General SharePoint]]></category>
		<category><![CDATA[SharePoint Design]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[search]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[suggestions]]></category>

		<guid isPermaLink="false">http://davecavins.com/?p=233</guid>
		<description><![CDATA[In Part 1 of this post we used a simple javascript to display suggestions on a custom search box. After I wrote that post I was thinking it would make more sense to read the suggestions from a list instead of a JavaScript file. This post will explain how to setup the list and edit [...]


Related posts:<ol><li><a href='http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/' rel='bookmark' title='Adding Suggestions to the Sharepoint search box'>Adding Suggestions to the Sharepoint search box</a></li>
<li><a href='http://davecavins.com/2009/11/sharepoint-vertical-news-ticker/' rel='bookmark' title='SharePoint Vertical News Ticker'>SharePoint Vertical News Ticker</a></li>
<li><a href='http://davecavins.com/2009/11/slideshow-with-captions/' rel='bookmark' title='Image Slideshow with captions'>Image Slideshow with captions</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/">In Part 1 of this post</a> we used a simple javascript to display suggestions on a custom search box. After I wrote that post I was thinking it would make more sense to read the suggestions from a list instead of a JavaScript file. This post will explain how to setup the list and edit the JavaScript to read the suggestions from a list. The idea is that an administrator could manage the list and help guide users toward specific information instead of getting numerous un-related results like in <a href="http://www.youtube.com/watch?v=i1AwFY6MuwE" target="_blank">those commercials for bing</a>.</p>
<p>Assuming you already have the search box setup as described in <a href="http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/">Part one of this post</a> all you will need to do is change the javascript and add some code to the page.</p>
<h2>Setup</h2>
<ul>
<li>Do everything from the first post</li>
<li>Add a link to jQuery somewhere on the page.</li>
<li>Create a custom list called &#8216;Suggestions&#8217;. It just needs to have the default title field. Create at least one item in the list and in the title enter several comma separated words.</li>
<li>Add the code below to the page.</li>
</ul>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript” src=“http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function GetItemsFromSP() {
    var soapEnv =
 “&lt;soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'&gt; \
                &lt;soapenv:Body&gt; \
                     &lt;GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'&gt; \
                        &lt;listName&gt;Suggestions&lt;/listName&gt; \
                        &lt;viewFields&gt; \
                            &lt;ViewFields&gt; \
                               &lt;FieldRef Name='Title' /&gt; \
                           &lt;/ViewFields&gt; \
                        &lt;/viewFields&gt; \
                    &lt;/GetListItems&gt; \
                &lt;/soapenv:Body&gt; \
            &lt;/soapenv:Envelope&gt;”;
       $.ajax({
        url: “_vti_bin/lists.asmx”,
        type: “POST”,
        dataType: “xml”,
        data: soapEnv,
        complete: processResult,
        contentType: “text/xml; charset=\”utf-8\”“,
        async: false
    });
}
function processResult(xData, status) {
    $(xData.responseXML).find(“z\\:row”).each(function() {
        $(“#data”).append(“” + $(this).attr(“ows_Title”) + “,”);
    });
}
&lt;/script&gt;
&lt;script type=“text/javascript” src=“Resources/searchfield.js”&gt;&lt;/script&gt;
&lt;div style=“display:none; visibility:hidden” id=“data”&gt;&lt;/div&gt;
</pre>
<p>The code above get the items from the Suggestions list, seperates them with commas and puts them in a hidden div with an ID of data. Now we just need to edit the searchfield script to read in the information from our hidden div. To do this edit searchfield.js line 26 to call the GetItemsFromSP function and set the suggestionText variable to be equal to the contents of our hidden div. Here is the code.</p>
<pre class="brush: jscript; title: ; notranslate">
/**/*/*/*/**/
	GetItemsFromSP();
	var suggestionText =  $(“#data”).html();
</pre>
<p>Test the page and make sure it works by typing the first few letters of one of the words in you list item.</p>
<h2>Conclusion</h2>
<p>This is very similar to <a href="http://weblogs.asp.net/jan/archive/2009/07/02/sharepoint-search-as-you-type-with-jquery.aspx">Jan Tielens&#8217; SharePoint Search-as-You-Type with jQuery solution </a>but I wanted the search box to still be usable even if there are no suggestions. In Jan&#8217;s solution the &#8216;search box&#8217; does not actually do anything when the magnifying glass is clicked. There are likely better ways to do this and if you know of one please post a comment.</p>


<p>Related posts:<ol><li><a href='http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/' rel='bookmark' title='Adding Suggestions to the Sharepoint search box'>Adding Suggestions to the Sharepoint search box</a></li>
<li><a href='http://davecavins.com/2009/11/sharepoint-vertical-news-ticker/' rel='bookmark' title='SharePoint Vertical News Ticker'>SharePoint Vertical News Ticker</a></li>
<li><a href='http://davecavins.com/2009/11/slideshow-with-captions/' rel='bookmark' title='Image Slideshow with captions'>Image Slideshow with captions</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://davecavins.com/2009/10/suggestions-foto-the-sharepoint-search-box-part-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Filter Lists by Date Range</title>
		<link>http://davecavins.com/2009/09/filter-by-date-range/</link>
		<comments>http://davecavins.com/2009/09/filter-by-date-range/#comments</comments>
		<pubDate>Wed, 02 Sep 2009 14:06:42 +0000</pubDate>
		<dc:creator>davecavins</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Data View Web Part]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[search]]></category>
		<category><![CDATA[SharePoint]]></category>

		<guid isPermaLink="false">http://davecavins.com/?p=172</guid>
		<description><![CDATA[On a recent project one of the requirements was that users be able to filter a list by a date range.  To this I tried using two date filter webparts connected to a data view webpart.  A detailed description of how to set this up can be found here.  This solution worked well enough but there was a page [...]


Related posts:<ol><li><a href='http://davecavins.com/2011/08/simple-search-box-with-radio-buttons/' rel='bookmark' title='Simple Search Box with Radio Buttons'>Simple Search Box with Radio Buttons</a></li>
<li><a href='http://davecavins.com/2009/12/updating-the-people-picker/' rel='bookmark' title='Updating the People Picker'>Updating the People Picker</a></li>
<li><a href='http://davecavins.com/2010/03/adding-comments-to-a-list-part-1/' rel='bookmark' title='Adding Comments to a List Part 1'>Adding Comments to a List Part 1</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>On a recent project one of the requirements was that users be able to filter a list by a date range.  To this I tried using two date filter webparts connected to a data view webpart.  A detailed description of how to set this up can be <a title="Filter between two dates (date range) with the Data view Webpart " href="http://yanlinglei.blogspot.com/2008/11/filter-between-two-dates-date-range.html" target="_blank">found here</a>.  This solution worked well enough but there was a page refresh after the user entered each date, so the user enters the first date (page refresh) user enters second date (page refresh again) and finally they get the results.  This annoyed me, I wanted to remove the extra page loads so I tried several things and this is what I finally came up with.</p>
<h3>Setup</h3>
<p>Using a content editor webpart build the form elements needed to collect the dates, two inputs and a search button.  Give each input a unique ID. Here is the code I used.</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script language=&quot;JavaScript&quot;&gt;
function submitForm()
{
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
window.parent.location=&quot;default.aspx?T1=&quot; + startDate + '&amp;T2=' + endDate;
}
&lt;/script&gt;
&lt;p&gt;&lt;div id=&quot;dateDiv&quot; style=&quot;display:none;&quot; class=&quot;filterBox&quot;&gt;
&lt;h4&gt;Date Search&lt;/h4&gt;
        Between
&lt;input name=&quot;startDate&quot; type=&quot;text&quot; id=&quot;startDate&quot; value=&quot;&quot; size=&quot;15&quot; class=&quot;dateformat-Y-ds-m-ds-d&quot; value=&quot;&quot;&gt;
and
&lt;input name=&quot;endDate&quot; type=&quot;text&quot; id=&quot;endDate&quot; value=&quot;&quot; size=&quot;15&quot; class=&quot;dateformat-Y-ds-m-ds-d&quot; value=&quot;&quot;&gt;
 YYYY-MM-DD
&lt;input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Go&quot;  onClick=&quot;submitForm();this.disabled=true;&quot;&gt;
&lt;/div&gt;
</pre>
<p>The class names are used to activate the date picker script but can be whatever you want. I used this <a href="http://www.frequency-decoder.com/demo/date-picker-v4/">date picker script from Frequecy Decoder</a></p>
<p>The submitForm() function simply takes the values from the inputs and adds them as query string variables at the end of the URL. We can now use these values to filter the list.</p>
<h3>Filtering the Data View Web part</h3>
<p>To filter the content of the DVWP based on the date we have to setup some parameters for the start and end dates.   Under &#8216;Common Data View Tasks&#8217; just choose &#8216;Parameters&#8217; for both the start and end date set the source as &#8216;Query String&#8217;. The query string variable will be whatever you defined in the JavaScript so in this case they are T1 and T2. Set the default value for the start date to some date impossibly far in the past and for the end date set it to something like the year 3000. This will ensure that the list will show all records if no values are passed for the start and end dates.</p>
<p><a href="http://davecavins.com/wp-content/uploads/2009/09/parameters.jpg"><img class="size-full wp-image-192 alignnone" title="parameters" src="http://davecavins.com/wp-content/uploads/2009/09/parameters.jpg" alt="parameters" width="506" height="338" /></a></p>
<p>Then all you have to do is setup your filter based on the parameters from the query string.</p>
<p><a href="http://davecavins.com/wp-content/uploads/2009/09/filter.jpg"><img class="aligncenter size-full wp-image-193" title="filter" src="http://davecavins.com/wp-content/uploads/2009/09/filter.jpg" alt="filter" width="446" height="269" /></a></p>
<p>You&#8217;re done.</p>
<h3>Things to remember</h3>
<p>The date has to be passed in YYYY-MM-DD format in order to work.</p>
<p>If the detault values for your start and end date parameters are not set high / low enough all records will not display when not date range is entered.</p>


<p>Related posts:<ol><li><a href='http://davecavins.com/2011/08/simple-search-box-with-radio-buttons/' rel='bookmark' title='Simple Search Box with Radio Buttons'>Simple Search Box with Radio Buttons</a></li>
<li><a href='http://davecavins.com/2009/12/updating-the-people-picker/' rel='bookmark' title='Updating the People Picker'>Updating the People Picker</a></li>
<li><a href='http://davecavins.com/2010/03/adding-comments-to-a-list-part-1/' rel='bookmark' title='Adding Comments to a List Part 1'>Adding Comments to a List Part 1</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://davecavins.com/2009/09/filter-by-date-range/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Adding Suggestions to the Sharepoint search box</title>
		<link>http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/</link>
		<comments>http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 20:10:41 +0000</pubDate>
		<dc:creator>davecavins</dc:creator>
				<category><![CDATA[SharePoint Design]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[search]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[SharePoint Designer]]></category>
		<category><![CDATA[suggestions]]></category>

		<guid isPermaLink="false">http://davecavins.com/?p=46</guid>
		<description><![CDATA[I got the idea for this from here: http://cssglobe.com/lab/searchfield/. The idea is that by giving users suggestions of what they should be searching for they can be guided to the most important information. When I am searching for something many times I am unsure what what search terms will give me the best results. To get [...]


Related posts:<ol><li><a href='http://davecavins.com/2009/10/suggestions-foto-the-sharepoint-search-box-part-2/' rel='bookmark' title='Adding Suggestions to the Sharepoint search box : Part 2'>Adding Suggestions to the Sharepoint search box : Part 2</a></li>
<li><a href='http://davecavins.com/2011/08/simple-search-box-with-radio-buttons/' rel='bookmark' title='Simple Search Box with Radio Buttons'>Simple Search Box with Radio Buttons</a></li>
<li><a href='http://davecavins.com/2010/03/adding-comments-to-a-list-part-2/' rel='bookmark' title='Adding Comments to a List Part 2'>Adding Comments to a List Part 2</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><img class="size-full wp-image-70 alignright" title="search" src="http://davecavins.com/wp-content/uploads/2009/04/search.jpg" alt="Search Suggestions" width="243" height="152" /></p>
<p>I got the idea for this from here: <a href="http://cssglobe.com/lab/searchfield/" target="_blank">http://cssglobe.com/lab/searchfield/</a>. The idea is that by giving users suggestions of what they should be searching for they can be guided to the most important information. When I am searching for something many times I am unsure what what search terms will give me the best results.</p>
<p>To get started we will need a search box to work with.  The out of the box search box could work but I prefer to use the one mentioned <a href="http://www.thesug.org/Blogs/kyles/archive/2008/2/11/Design_Minute_SharePoint_Search_Box.aspx.aspx" target="_blank">here by Kyle Schaeffer</a> because it gives me a lot more flexibility with the design.   <span id="more-46"></span></p>
<h3>Adding a Search Box to the page</h3>
<p>To get the search box on your page :</p>
<ol>
<li>Add this register tag at the top of the page layout or masterpage :
<pre class="brush: plain; title: ; notranslate">
&lt;%@ Register Tagprefix=&quot;SPSWC&quot;
Namespace=&quot;Microsoft.SharePoint.Portal.WebControls&quot;
Assembly=&quot;Microsoft.SharePoint.Portal, Version=12.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c&quot; %&gt;</pre>
</li>
<li>If needed hide the existing search box (I left mine, and it still works fine).</li>
<li>Put this code where you want the search box to show up:
<pre class="brush: plain; title: ; notranslate">&lt;br /&gt;
&lt;div id=&quot;searchLayout&quot;&gt;
&lt;SPSWC:SearchBoxEx id=&quot;SearchBox&quot; RegisterStyles=&quot;false&quot; TextBeforeTextBox=&quot;&quot; TextBoxWidth=&quot;200&quot; GoImageUrl=&quot;&quot; GoImageActiveUrl=&quot;&quot; GoImageUrlRTL=&quot;&quot; GoImageActiveUrlRTL=&quot;&quot; UseSiteDefaults=&quot;true&quot; DropDownMode=&quot;HideScopeDD&quot; SuppressWebPartChrome=&quot;true&quot; runat=&quot;server&quot; WebPart=&quot;true&quot; __WebPartId=&quot;{0043945F-2D2B-4A02-8510-CED13B6F04DF}&quot;&gt;
&lt;/div&gt;
&lt;p&gt; </pre>
</li>
<li>Save the page.</li>
</ol>
<h3>Javascript</h3>
<p>Ok now comes the integration part.  In the JavaScript code searchfield.js you must insert the ID of the search input field.</p>
<p>
<pre class="brush: jscript; title: ; notranslate">var id = &quot;searchfield&quot;</pre>
</p>
<p>In ASP.NET control IDs change when the page is rendered so the best way to do this is to view the source of the page or use FireBug to get the id.  It will be something long like &#8220;ctl00_PlaceHolderMain_searchbox2_SFF4064A0_InputKeywords&#8221;</p>
<p>Now save the JS file and test the page.</p>
<p>If it does not work make sure you have referenced your javascript properly.</p>
<ul>
<li>If you are doing this in a page layout the script link should go inside the AdditionalPageHead content place holder.</li>
<li><span class="asp">If you are putting this in a masterpage you can either refernece the script in the &lt;head&gt; section or just above the closing &lt;/body&gt; tag.</span></li>
</ul>
<div id="attachment_151" class="wp-caption aligncenter" style="width: 229px"><a href="http://davecavins.com/wp-content/uploads/2009/04/search2.jpg"><img class="size-full wp-image-151" title="search2" src="http://davecavins.com/wp-content/uploads/2009/04/search2.jpg" alt="Search Suggestions" width="219" height="200" /></a><p class="wp-caption-text">Search Suggestions</p></div>
<h3>Watch out</h3>
<p>This script includes code that will clear the contents of the search box on the first focus so you don&#8217;t need to use the &#8220;QueryPromptString&#8221; tag on your search box because it wont work.</p>
<p>This is what mine came out looking like with a little CSS code.  Also to get the &#8220;Go&#8221; image to show up I just set the &#8220;GoImageUrl&#8221; attribute.</p>
<h3>Conclusion</h3>
<p>This is a very simple solution and can help enhance the user experience but it is not as integrated with SharePoint as I would like.  Ideally the suggestions would be read in from a list stored somewhere on the site.</p>


<p>Related posts:<ol><li><a href='http://davecavins.com/2009/10/suggestions-foto-the-sharepoint-search-box-part-2/' rel='bookmark' title='Adding Suggestions to the Sharepoint search box : Part 2'>Adding Suggestions to the Sharepoint search box : Part 2</a></li>
<li><a href='http://davecavins.com/2011/08/simple-search-box-with-radio-buttons/' rel='bookmark' title='Simple Search Box with Radio Buttons'>Simple Search Box with Radio Buttons</a></li>
<li><a href='http://davecavins.com/2010/03/adding-comments-to-a-list-part-2/' rel='bookmark' title='Adding Comments to a List Part 2'>Adding Comments to a List Part 2</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://davecavins.com/2009/04/adding-suggestiong-to-the-sharepoint-search-box/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

