How to: Add a Page-Specific Search to Your Website

by Utsab Karki, Senior WordPress Developer

Insights / Website Development / How to: Add a Page-Specific Search to Your Website

When people aren’t able to find what they’re looking for on your website, they usually search for it.

Having a website-specific search is a great way to enhance user experience and accessibility, allowing you to help users find what they are looking for without having to browse through each and every page on the site.

Our content management system of choice, WordPress, comes with a built-in sitewide search function that we always implement for a better user experience. We’ve also written previously about ways to improve the search results page and on ways to make the search functionality more usable. By following these recommendations, you can implement a great sitewide search feature on your website.

As the name suggests, the sitewide search function searches the entire site and displays results based on the matched keywords. But what if you want to give your user the ability to search just the current page or just a section of a page?

Building Page-Specific Search Functionality

Let’s say you have a page with a section that lists the contact information for all your staff – like a name, phone number and email address. We’ll call it the Staff Directory.

If the Directory only contains a few entries, then it doesn’t make sense to implement search, but if the list is pretty long, then being able to search will improve the user experience and make things more accessible.

A person using your sitewide search to find a specific staff member’s information would type in the staff member’s name, and the results would show every page where that staff member’s name appears. This means they will still have to pick through the search results to locate the information they are looking for.

But with a page-specific search, they can easily find the staff member’s contact information in the Staff Directory. To do this, we can simply implement a search box in the Staff Directory and by typing in their name, they’ll quickly find their contact information.

In order to implement the search, we will have to create some HTML markup or update existing one so that each staff member resides inside its own div and will have to add a text input field where the user can type in their search keywords.

<input id="staff-search" type="text" />
<div class="staff-member">
Name
Phone Number
Email Address
</div>
<div class="staff-member">
Name
Phone Number
Email Address
</div>
<div class="staff-member">
Name
Phone Number
Email Address
</div>

The Search Function

Once we have the markup in place, we can add styles as we want. For the search functionality, we will utilize jQuery and just add the following jQuery function to the page.

<script type=”text/javascript”>
jQuery(function($) {
     $(document).ready(function(){
          $('#staff-search').on('keyup', function() {
               var value = $(this).val().toLowerCase();
               $('.staff-member').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
     });
});
</script>

In the above code, we use the keyup keyboard event on the text input field. The handler function is triggered each time the user inputs a character in the text field. The current value of the input field is converted to lowercase letters and is stored in the value variable. Then we call the filter function on each of the staff-member div’s. The contents of each staff-member div is converted to lowercase which allows the search to be case insensitive and checked to determine if the current input value matches any of the contents. The toggle function is used to hide any staff-member div’s that do not match the search criteria.

By simply adding a few lines of code, you can make your website more user-friendly and can help users find what they are looking for more efficiently. If you need help implementing a search functionality on your website or for any other digital marketing needs, reach out to us.