typeahead.js is a fast and fully-featured auto-complete library developed by Twitter and I use it on this website for the search feature – I’ll also will be using it for other parts of this website in the future. You can see more examples here.In plain language, typeahead.js provides best suggestions and recommendations based on what the visitor is typing – as they type. This is a great feature to have for your website in terms of search, as it gives the visitor an idea of what he or she is looking for or what you want them to look for.

So, let me show you how-to add it to your WordPress installation to power your search function.

The Result:

typeahead.js Example

Add the JavaScript to Your Website

Firstly, go to the typeahead.js website and download the script. The download will feature two JavaScript files: typeahead.js and typehead.min.js; where typeahead.js is not minified and where typeahead.min.js is minified.

We’ll use the minified version, as it’ll save space and bandwidth and an un-minified version will not function any differently.

Upload the minified JavaScript file to where you want it, and add the following code to your theme’s footer.php file (before the tag):

<script src="http://yourdomain.com/path-to-file/typeahead.min.js">

Right underneath this, add the following code:

$(document).ready(function() { $('.search .typeahead').typeahead({ name: 'search', prefetch: '//yourdomain.com/path-to-file/search.json', limit: 10 }); });

Make sure for both examples, you change the domain name and the path to the file. Once you’ve done this, save the footer file and close it.

The classes typeahead.js hooks onto are: search and typeahead. You can change the first one, search, to whatever you want. You can also change the number of suggestions / recommendations that are shown on line five (5), which at present is 10.

Create and Upload the JSON File

The keywords that are used to auto-complete the search form is stored in a JSON file. The JSON file name is search.json and we defined the URL to it on line four (4) of the above code snippet.

If you don’t have a JSON file, you’ll need to create one. The contents of the JSON file will look like this:

["Fraud","Blogging","Books","Holdings","Blog","Business","Career","Job","Resume","Code Snippets","Cybersecurity","security","Domain","Drupal","Tools","Health","Image Licensing","Internet","ASP","CSS","HTML","Python","Life Hacking","Media","Mobile","GitHub","Data","Code","Finance","Photography","Services","Projects","Reports","Research","Social Media","Antispam","Vegetarianism","Websites","SEO","Twitter","Bootstrap","Usability","Conversion","Hosting","Themes","Travel","Bloggers","WordPress"]

As you can see, each keyword has quotes around it and is separated by a comma, with square brackets wrapping around everything. Modify the example keywords to the keywords you want. I would recommend category names, tags and pages as keywords, but you can use anything you want.

You can copy the contents above to search.json or download a complete one here.

Simple Modification to the Search Form

Now we’ll need to slightly modify the searchform.php file for your theme. Open searchform.php and do the following:

Wrap the search form with <div class="search">, at the start, and </div> at the bottom. If you already have the search form wrapped with another div class, simply add search as a class or if search class is already there, you don’t need to do anything.

Next, look for the text input. This is where the visitor will enter the keyword(s) they are looking for. It looks something like this:

<input type="text" value="" name="s" id="s" class="form-control" />

Add typeahead as a class. So, if we were going to do this to the above, the above would look like this:

<input type="text" value="" name="s" id="s" class="form-control typeahead" />

How to Style the Drop Down Menu

The suggestions / recommendations are shown in a drop down menu. You can easily style the drop down menu using the following CSS, which you can create a separate file for or add it to your theme’s CSS stylesheet.

.typeahead, .tt-query, .tt-hint { width: 396px; height: 30px; padding: 8px 12px; font-size: 24px; line-height: 30px; border: 2px solid #ccc; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; outline: none; } .typeahead { background-color: #fff; } .typeahead:focus { border: 2px solid #0097cf; } .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999 } .tt-dropdown-menu { width: 422px; text-align: left; margin-top: 12px; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; } .tt-suggestion.tt-is-under-cursor { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; }

Or if you are using Bootstrap like I am, you can use the following CSS:

.tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075) } .tt-hint { color: #999; padding: 6px 12px; text-align: right } .tt-dropdown-menu { margin-top: 4px; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.2); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2) } .tt-suggestion { padding: 3px 20px; font-size: 14px; line-height: 18px } .tt-suggestion.tt-is-under-cursor { color: #fff; background-color: #ffb648 } .tt-suggestion p { margin: 0 }

You’re Done!

This may look like a lot, but it’s not. It’s simple to integrate typeahead.js to your WordPress site using a few steps. By using typeahead.js, it adds a little something to your WordPress search, by enhancing the functionality.