Autocomplete search with images in Rails

Autocomplete search with images in Rails


Today I am going to show you how to implement a trendy autocomplete functionality using FoxyComplete javascript plugin

Some time back I was looking for a basic search autocomplete implementation to use in one of my rails application. While I found many advanced solutions including Soulmate which is a tutorial for a later date, I came across a simpler solution called FoxyComplete. FoxyComplete is a jQuery plugin that fetches clickable search results along with images either automatically scraped from the result’s content or a specified file. It’s easy to implement and easy to tweak also.

I suggest you read the guide about how it all works to get better knowledge of how everything fits together. Once you've done that, following along here will become dead simple. You can quickly take a sneak peek to what what we will be creating in this tutorial in this demo, and the source code can also be found on my Github Repo. For my case I will use the Youtube API as the source of my autocomplete data. In your case you may want to autocomplete records in your own database.

Getting Started

Lets start by creating a new rails application. Lets name it 'autocomplete'

$ rails new autocomplete

We then create a searches controller with the index action

$ rails g controller searches index

For quick styling i'm using bootstrap. I've placed bootstrap.css and bootstrap.js in vendor/assets/stylesheets and vendor/assets/javascripts respecitvely and included them in the respective js and css manifest files.

With that we can now set the root path of our application to the searches controller index actions. We'll then set a custom root where our plugin will invoke to get search results from

routes.rb (app/config/routes.rb)

Loading Gist

Now lets grab the foxycomplete.css and the jquery.foxycomplete.js files. We'll add this files to the vendor/assets/stylesheets and vendor/assets/javascripts directories respectively. With that done, lets require this file in our manifest files

application.js (app/assets/javascripts/application.js)

Loading Gist

application.css (app/assets/stylesheets/application.css)

Loading Gist

With that in place lets create a form in our index view in searches folder

index.html.erb (app/views/searches/index.html.erb)

Loading Gist

Now lets plug in our autocomplete. Rename to searches.js as we will be working in pure javascript. Then paste this

Searches.js (app/assets/javascripts/searches.js)

Loading Gist

Next lets rename our foxycomplete.css to foxycomplete.css.erb so that we can embed ruby code in it. I did this so that the loading gif is correctly referenced even in production when the assets get precompiled. The current css has properties we don't need in our case, replace it with the only properties we need

foxycomplete.css.erb (vendor/assets/stylesheets/foxycomplete.css.erb)

Loading Gist

For my case I now have to call the YouTube API in the searches action of our searches controller. Your logic should go somewhere similar

Loading Gist

With that we can now test our hard work out and see if it works

Yay!! works like a charm!. FoxyComplete offers a lot of functionality for developers and although the original tutorial mainly focussed on php/wordpress, I thought to myself 'why not implement it in a rails app'. I hope this tutorial gave you an overview on how to intergrate the plugin in your own rails application. Have a question? let me know in the comments sections below





01 Oct 14

How would you write this searches controller to search users?



12 Jan 15

Hey, i wonder how it is possible to open a url. If i click on the searches to really open them ? or maybe give the option to download them.

Latest Tutorials


Private Inbox System in Rails with Mailboxer New

Introduction It's been quite a while since my last tutorial and since then I've recieved alot of requests by email to implement a private messaging system ...

Ajax Sortable Lists Rails 4

With me, is a simple to-do list application where users can create dummy to-do lists and displays them in card-like form just like in Trello. We want to e...

Managing ENV variables in Rails

Often when developing Rails applications, you will find a need to setup a couple of environment variables to store secure information such as passwords, a...

Gmail Like Chat Application in Ruby on Rails

Introduction We are all fond of the Gmail and Facebook inline chat modules. About a week ago, I came across a tutorial on how to replicate hangouts chat...

Fast Autocomplete Search Terms - Rails

Introduction In many cases you find that you need to introduce a global search in your rails application i.e. search multiple models at a go using one form...

Load more scroll top