Developing the Search box: 5 ways to add a search box on your website

In our previous posts on Introduction to Website Search and Designing the Search Box, we underscored the importance of the search bar for improved UX, the ideal placement for the bar & much more. Now that we’ve established the why and the how to design, let’s take a look at the how to develop in the third & final part of the Search Box Series. In this post, we’ll cover:

  • Using Google Custom Search
  • Using third party search engines
  • Adding a search script
  • Customizing 3rd party search engines – Lucene
  • Platforms built on Lucene

1) Using Google Custom Search

One of the easiest ways to add a search box on your website is to add a ‘Google Custom Search’. The search engine efficiently performs the function of helping your visitors find what they’re looking for with relevant, high-quality results. The search uses refinements, auto-complete & promotions to enhance the search experience.

Additionally, the search gives you access to Google Analytics to help understand user behaviour.  

You can find the entire tutorial here. The tool is a JavaScript file loaded and run from Google’s site. You can apply your own CSS styles to the box.

Advantages of Google Custom Search:

  • It’s free
  • The paid search version (without ads) is also quite affordable
  • You can customise the search experience
  • Requires minimal set-up
  • Doesn’t require maintenance of background files & plugins
  • Can analyse results from Google Analytics to improve search

Disadvantages of Google Custom Search:

  • Doesn’t blend in with website designs
  • Google API doc. is complicated

2) Using third-party search engines

FreeFind like Google Custom search offers free search boxes with sponsored ads. An ad-free version will cost you $19/year for a site up to 25,000 pages. The HTML creates a form (different from the JavaScript file that powers the Google search box). This is easy to configure. You can even exclude some of your pages from the search results or prioritize the order of search results.

Here is the code for a FreeFind search box:

<!-- start of freefind search box html →
  <table width=”400” border=0 cellpadding=0 cellspacing=0 >
      <td style=”font-family: Arial, Helvetica, sans-serif;
            font-size: 7.5pt;”>
        <form  id=”ffresult_sbox0” style=”margin:0px; margin-top:4px;” action=”” method=”get” 
          accept-charset=”utf-8” onsubmit=”;”>
          <input type=”hidden” name=”si” value=”1870143”>
          <input type=”hidden” name=”pid” value=”r”>
          <input type=”hidden” name=”n” value=”0”>
          <input type=”hidden” name=”_charset_” value=””>
          <input type=”hidden” name=”bcd” value=”&#247;”>
          <input type=”hidden” name=”sbv” value=”j1”>
          <input type=”text” name=”query” size=”32” placeholder = “enter search text here” required> 
          <input type=”submit” value=”search”>
          <input type=”reset” name=”Reset” id=”button” value=”Reset”>
      <td style=”text-align:left; font-family: Arial, Helvetica, 
          sans-serif;font-size: 7.5pt; padding-top:4px;”>
        <a style=”text-decoration:none; color:gray;” href=””  
     onmouseout=”’none’” >site search by
        <span style=”color: #606060;”>freefind</span></a>
         <a id=”ffresult_adv0” onclick=”;” href=”;pid=a&amp;

Other third-party hosted search services include:

Advantages of 3rd party scripts:

  • Fairly easy to set up
  • No compulsory knowledge required to run PHP scripts & configurations

Disadvantages of 3rd party scripts:

  • May have banner ads and links to 3rd party company sites
  • You may not have complete control over your search results page output the way you want it to fit according to your web design
  • The search engine will spider your site to reindex, adding to your website’s bandwidth usage

3) Adding script to the website

Another way of adding a search bar to your website is by simply adding a script in either PHP or Perl. By adding a script, the code is housed on the server and when data or information typed in the bar is sent, the server-side engine runs the script to produce results.

Certain scripts will either run a crawl with your entire website every time the search is used by the visitor or periodically crawl your website & create a search index which is then searched every time a user inputs a search query.


  • Easy to setup
  • Stays up to date with the latest changes on the website
  • Code isn’t available to anyone to access web directories so privacy is maintained
  • No third-party advertisements
  • Customizable page results

Disadvantages of using scripts:

  • Might take time to throw up results if the website is big
  • The index-based scripts are hard to maintain in that, it has to periodically crawl & update the index
  • It could be awhile before new content appears in the index-based search depending on how frequently the crawl has to be run & index updated

Some popular PHP & Perl scripts are:

4) Customizing third party search engines

Lucene is a third-party search engine that is integrated with websites & fully customizable through the Public Site Search API to support search capabilities on websites.

Contributors searches are run against a search index powered by Lucene. A search index is built by an automated process called indexing which collects, stores & accesses data in a format that is easily retrieved during a query. Results are available based on data that is available in the index at the time of the search.

Once the index is built, the search engine runs an event every 30 seconds that checks for changes made to the assets of the type selected for indexing. If changes were made, Lucene updates the index automatically.

The steps for setting up Lucene are:

Step 1: Enabling the Lucene search engine on your system

Step 2: Adding asset types to the search index that indicates to Lucene which assets to index

Step 3: Specifying attributes for asset type index to be able to be returned by the search feature on the live site

Step 4: Enabling indexing of binary files by configuring Lucene to convert the contents of those files to text while indexing assets

For more detailed information on the overview, setup, maintaining search indexes, click here.

5) Platforms built on Lucene

Algolia is a platform built on Lucene that’s great for integrating search on your website. The API provided by the search engine provides developers with resources and tools to create fast & relevant searches.

The extensive documentation, guides & active community make it easy to work with Algolia. You can find the documentation here.

Advantages of Algolia:

  • It takes care of the complex behind the scenes development that comes with building your own search


We hope we were able to guide you to the right search solution as per your expertise. Tell us what worked best for you & your clients in the comments section below.

Think you can contribute as a guest writer on our blog? Click here to get started.

About Amrita

AmritaAmrita is a marketing specialist by profession who loves writing, music and animals.



Amrita is a marketing specialist by profession who loves writing, music and animals.