Integrating typeahead.js into WordPress and Ruby on Rails

Exclusive offer: get 50% off this eBook here
Instant typeahead.js [Instant]

Instant typeahead.js [Instant] — Save 50%

Deliver an extraordinary experience to users of your website with the help of Typeahead.js with this book and ebook

$9.99    $5.00
by Toby Osbourn | October 2013 | Open Source Web Development

In this article by Toby Osbourn, the author of Instant typeahead.js, explains the functionality of WordPress, which is probably the biggest open source blogging platform in the world right now and it is pretty feature complete. It also discusses 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.

(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:


Instant typeahead.js [Instant] Deliver an extraordinary experience to users of your website with the help of Typeahead.js with this book and ebook
Published: September 2013
eBook Price: $9.99
See more
Select your format and quantity:

About the Author :


Toby Osbourn

Toby Osbourn is a developer from Belfast, Northern Ireland. He has been fascinated by computers since the 1990s and since 2007 has been focusing his efforts on learning everything there is to know about web development.

More recently he has been focused on crafting fully thought-out user experiences on the frontend, while writing efficient and maintainable code on the backend.

He currently works as a web developer for ExamTime.com, where he gets to play with both the frontend and backend of the ExamTime Web Application. He also frequently writes on his blog, which can be found at tosbourn.com and tweets at @tosbourn.

Toby has written for industry journals, such as the IEEE and the Software Developer's Journal, and he has also contributed articles to websites, such as phpmaster.com and sixrevisions.com.

Books From Packt


CoffeeScript Programming with jQuery, Rails, and Node.js
CoffeeScript Programming with jQuery, Rails, and Node.js

Instant Backbone.js Application Development [Instant]
Instant Backbone.js Application Development [Instant]

 Express Web Application Development
Express Web Application Development

Getting Started with Meteor.js JavaScript Framework
Getting Started with Meteor.js JavaScript Framework

 Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook

Learning Ext JS
Learning Ext JS

WordPress Web Application Development
WordPress Web Application Development

 Building Dynamic Web 2.0 Websites with Ruby on Rails
Building Dynamic Web 2.0 Websites with Ruby on Rails


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
X
q
6
L
v
t
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software