<img alt="" src="https://secure.make6pain.com/194280.png" style="display:none;">

How to Create a Custom SharePoint Search Box with jQuery

CustomSearch.png

Have you had the task of branding an out of the box SharePoint search box?  It’s not the hardest of things to do, but it can still be a bit of a challenge to get it to look exactly how you desire.  In this how-to, we will be exploring another solution that isn’t as headache inducing, and we get to have a little fun with some JavaScript and jQuery!

 

Creating a Custom Search Results Page

Since we’ll be leveraging the query of our search input value ourselves, we’ll be creating our own search page.  Once we have this page created, we’ll simply add the search web parts that we want onto the page.

Let’s create the new search results page.  Head over to your Site contents (make sure you’re on the root of your current site).

 

searchbox1.png

 

Once inside the Site contents, head into your Pages library.  Once inside the Pages library, go to "FILES" in your ribbon, then click the “New Document” dropdown, and select “Page.”

 

searchbox2.png

 

For this example, we’ll be calling our new page, “results.”  Select a page layout that you prefer.  I’m going to use a Blank Web Part one.

 

searchbox3.png

 

Click “Create,” and then once the page is created, click on the new page that now shows up in the list.

 

searchbox4.png

 

Once you’re on the new page, click “Edit Page” through the Settings menu in the ribbon.  Your page will now be in edit mode, and you can add the appropriate web parts to the desired zones.  In the left zone we’ll be adding the search refinements web part, and in the middle zone we’ll be adding the search results web part.  Once you have all of the web parts in place, your page should resemble something like this.

 

searchbox5.png

 

Adding Our Custom Search Box to the Master Page

Now that we have our new search results page created, we need to go inside our Master Page and include the HTML for our new custom search box.  If you’re using a custom Master Page, things might be a little different, but it should be easy enough to follow along.  Locate the current search control on your master page.  For example, if you’re using Seattle, you should see something similar to this:

 

<div id="searchInputBox">

   <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />

</div>

 

For simplicity, we’re going to set an inline style to the searchinputBox, and set its display to none.

 

<div id="searchInputBox" style=”display:none;”>

   <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />

</div>

 

Directly underneath this div we’ll add our new HTML for the custom search box.

 

<div class="search-container">

     <input id="search-input" type="text" placeholder="Search..."                    onclick="this.value=''">

     <i id="search-submit" class="material-icons">search</i>

</div>

 

You’ll notice that we’re using Google’s Material Design Icons.  Check out one of my previous tutorials to learn how to use icon fonts in SharePoint.

 

Now that our HTML is in place, we also need to add our custom JavaScript file to our Master Page.  In SharePoint Designer, navigate to the style library on your current site.  Once you’re inside the style library, create a new folder and name it “scripts.”  Go into that directory, and then we’ll create a new JavaScript file.  We can do this right from SharePoint Designer.  Click on “File” in the ribbon, and then select “JavaScript” from the dropdown.  This will create a new blank JavaScript file for us.  We’ll call it, “search.js.”

 

After you have the file create, open it up and paste the following JS code into it.

 

$(document).ready(function() {

      function inputSearch() {

             var link = "";

             $('#search-submit').click(function(event) {

                       event.preventDefault();

                       var queryString = $('#search-input').val();

                       // Make sure this location matches your site structure

                       var location = "/Pages/results.aspx?u=#k=" + queryString;

                       link = location;

                       $('#search-input').attr("value", '');

                       window.location.href = link;

                       return;

             });

      }

      inputSearch();

               

      $('#search-input').keypress(function(key) {

             if($(this).is(":focus") && (key.which == 13)) {

                       $('#search-submit').click();

             }

      });

});

   

Next, we need to link the reference to our new JavaScript file in our Master Page.  Remember, we must reference these files within the <head> tags of our Master Page.

 

<script type="text/javascript" src="/sites/ba/StyleLibrary/Scripts/intranet.js"></script>

 

After all of your changes are saved, a quick refresh on your page should reveal the new search box.  Here is what my example looks like, depending on your CSS it may look a bit different.

 

searchbox6.png

 

Adding Some Quick CSS

 

Let’s add some quick CSS to our search box to spruce it up a bit.  Copy the snippet below and paste it into your CSS file. 

 

/*============================*/

/* Custom Search Box

/*============================*/

 

.search-container { width: 245px; height: 35px; float: right; border: 1px solid #e1e1e1; border-radius:8px; overflow:hidden; }

#search-input { width: 88%; height: 100%; font-size: 14px; color: #0072C6; background: transparent; border: 0; float:left; padding:2px 10px }

#search-submit { background-color:#f7f7f7; border-left:1px solid #e1e1e1; font-size:16px !important; height:100%; width:12%; text-align:center; font-size: 20px; color: #41b3e5; cursor: pointer; float:right; line-height:35px; }

#search-submit:hover {background-color:#0072C6;color:#fff;}

 

 

Once you save the file, you should see something similar to this:

 

searchbox7.png

 

Wrapping Things Up

Once you have everything checked in and published, you can run a few search tests on your page to make sure that the page is redirecting properly.  It’s important to note that the path to the results page is correct in our JavaScript file.  Enjoy your new search box!

 

 

For more tips and tricks like this, check out our SharePoint design blogs. Discuss ways to create your own custom designed SharePoint intranet by talking to one of our consultants today! 

Contact Us

Related Content