6 min read

(For more resources related to this topic, see here.)

Integrating typeahead.js into WordPress (Become an expert)

WordPress is an incredibly well known and well used open source blogging platform, and it is almost fully featured, except of course for the ability to have a typeahead style lookup on your site!

In this article we are going to fix that.

Getting ready

In order to create this we are going to first need to have a working WordPress installed. WordPress runs off a LAMP stack so if you haven’t got one of those running locally you will need to set this up.

Once set up you can download WordPress from http://wordpress.org/, extract the files, place them in your localhost, and visit http://localhost/install/. This will then guide you through the rest of the install process.

Now we should be ready to get typeahead.js working with WordPress.

How to do it…

Like so many things in WordPress, when it comes to adding new functionality, there is probably already a plugin, and in our case there is one made by Kyle Reicks that can be found at https://github.com/kylereicks/typeahead.js.wp.

  • Download the code and add the folder it downloads to /wp-content/plugins/
  • Log into our administration panel at http://localhost/wp-admin/ and go to the Plugins section.
  • You will see an option to activate our new plugin, so activate it now.
  • Once activated, under plugins you will now have access to typeahead Settings. In here you can set up what type of things you want typeahead to be used for; pick posts, tags, pages, and categories.

How it works…

This plugin hijacks the default search form that WordPress uses out of the box and adds the typeahead functionality to it.

For each of the post types that you have associated with typeahead plugin, it will create a JSON file, with each JSON file representing a different dataSet and getting loaded in with prefetch.

There’s more…

The plugin is a great first start, but there is plenty that could be done to improve it. For example, by editing /js/typeahead-activation.js we could edit the amount of values that get returned by our typeahead search:

if(typeahead.datasets.length){
  typeahead.data = [];
  for(i = 0, arrayLength = typeahead.datasets.length; i < arrayLength;
 i++){
    typeahead.data[i] = {
      name: typeahead.datasets[i],
      prefetch: typeahead.dataUrl + '?data=' + typeahead.datasets[i],
      limit: 10

    };
  }
  jQuery(document).ready(function($){
    $('#searchform input[type=text], 
#searchform input[type=search]').typeahead(typeahead.data);
  });
}

Integrating typeahead.js into Ruby on Rails (Become an expert)

Ruby on Rails has become one of the most popular frameworks for developing web applications in, and it comes as little surprise that Rails developers would like to be able to harness the power of typeahead.js.

In this recipe we will look at how you can quickly get up and running with typeahead.js in your Rails project.

Getting ready

Ruby on Rails is an open source web application framework for the Ruby language. It famously champions the idea of convention over configuration, which is one of the reasons it has been so widely adopted.

Obviously in order to do this we will need a rails application. Setting up Ruby on Rails is an entire article to itself, but if you follow the guides on http://rubyonrails.org/, you should be able to get up and start running quickly with your chosen setup.

We will start from the point that both Ruby and Ruby on Rails have been installed and set up correctly.

We will also be using a Gem made by Yousef Ourabi, which has the typeahead.js functionality we need. We can find it at https://github.com/yourabi/twitter-typeahead-rails.

How to do it…

  1. The first thing we will need is a Rails project, and we can create one of these by typing; 
    rails new typeahead_rails
  2. This will generate the basic rails application for us, and one of the files it will generate is the Gemfile which we need to edit to include our new Gem; 
    source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'sqlite3'
gem 'json'
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
gem 'twitter-typeahead-rails'
  3. With this change made, we need to reinstall our Gems: 
    bundle install
  4. We will now have the required file, but before we can access them we need to add a reference to them in our manifest file. We do this by editing app/assets/javascripts and adding a reference to typeahead.js: 
    //= require jquery
//= require jquery_ujs
//= require_tree
//= require twitter/typeahead
  5. Of course we need a page to try this out on, so let’s have Rails make us one; 
    rails generate controller Pages home
  6. One of the files generated by the above command will be found in app/views/pages/home.html.erb. Let’s edit this now: 
    <label for="friends">Pick Your Friend</label>
<input type="text" name="friends" />
<script>
  $('input').typeahead({
    name: 'people',
    local: ['Elaine', 'Column', 'Kirsty', 'Chris Elder']
  });
</script>
  7. Finally we will start up a web server to be able to view what we have accomplished; 
    rails s

And now if we go to localhost:3000/pages/home we should see something very much.

How it works…

The Gem we installed brings together the required JavaScript files that we normally need to include manually, allowing them to be accessed from our manifest file, which will load all mentioned JavaScript on every page.

There’s more…

Of course we don’t need to use a Gem to install typeahead functionality, we could have manually copied the code into a file called typeahead.js that sat inside of app/assets/javascripts/twitter/ and this would have been accessible to the manifest file too and produced the same functionality. This would mean one less dependency on a Gem, which in my opinion is always a good thing, although this isn’t necessarily the Rails way, which is why I didn’t lead with it.

Summary

In this article, we explained the functionality of WordPress, which is probably the biggest open source blogging platform in the world right now and it is pretty feature complete. One thing the search doesn’t have, though, is good typeahead functionality. In this article we learned how to change that by incorporating a WordPress plugin that gives us this functionality out of the box. It also discussed how Ruby on Rails is fast becoming the framework of choice among developers wanting to build web applications fast, along with out of the box benefits of using Ruby on Rails. Using Ruby gives you access to a host of excellent resources in the form of Gems. In this article we had a look at one Gem that gives us typeahead.js functionality in our Ruby on Rails project.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here