Autocomplete search with images in Rails
02 May 14
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.
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
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
Now lets grab the
With that in place lets create a form in our index view in searches folder
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
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
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