Tutorial: Opensearch with Rails 1.2 render :json
Posted by Sandro Paganotti in
Ruby on Rails -
comments are closed
As you might have noticed this website has a personalized search plugin that you can install by click on the browser search field; in fact this plugin is just an XML file ( you can find it here ) that tell your browser how to perform searches on this website.
Looking at the OpenSearch description page I found that is possible to specify an url that return suggests during the search; the google search plugin has this possibility: while you’re typing on the search box it displays suggests that you can click. In this tutorial we are going to use this “suggests feature” of opensearch to show cities that partially match what the user wrote in the searchbox.
Step 1: application
Ok, just create a new Rails application, a controller (search) with three actions, (index, suggest and you_choose) and a model (cities) that will hold all the American cities.
rails jsondemo
cd jsondemo
ruby script/generate controller search index suggest you_choose
ruby script/generate model city
I found this useful SQL file that holds all the American city names that we could use to populate our ‘cities’ table (Ok, no YAML but this is just a proof-of-concept application :-)
Step 2: search.xml
Now we have to create a search.xml file and put it into our public directory inside jsondemo app. The .xml file will look like this:
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>US cities lookup</ShortName>
<Description>Us cities lookup</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image height="16" width="16" type="image/x-icon">URL-TO-AN-ICON-FILE</Image>
<Url type="application/x-suggestions+json" template="http://YOUR-ADDRESS/search/suggest?city={searchTerms}"/>
<Url type="text/html" method="GET" template="http://YOUR-ADDRESS/search/you_choose/{searchTerms}"/>
</OpenSearchDescription>
of course you have to replace URL-TO-AN-ICON-FILE and YOUR-ADDRESS with an url that point to a .ico file and with the url of your application.
This .xml file tell Firefox what is the name (and the description) of your search plugin, what is the icon to put inside the search box, what url has to be called when you press enter and what is the url that point to the suggest page. Please note that ‘{searchTerms}’ is filled each time by Firefox with the phrase inside the searchbox.
Step 3: the search controller
When we created the search controller (step 1) we defined 3 actions: let’s see them in details:- index – it is the homepage of our applications.
- you_choose – it is the page Firefox call when someone press enter in the searchbox, in this page we have to display the name of the city the user choose.
- suggest – In this action we will search for the cities that partially matches the one typed by the user and we will render our result in JSON format.
Ok, with this idea in mind the controller will look more or less like this:
class SearchController < ApplicationController
def suggest
codes =City.find(:all,:conditions=>["cityname LIKE ?",params[:city]+"%"],:limit=>10,:group=>"cityname",:order=>"cityname")
@res = codes.map{ |c| c.cityname }
render :json=>[params[:city],@res].to_json
end
def index
end
def you_choose
@city = City.find(:first,:conditions=>["cityname LIKE ?",params[:city]+"%"],:limit=>10,:group=>"cityname",:order=>"cityname")
end
end
Note that here we could merge the two searches by adding a method to the model (here is DRY violating).
Step 4: Basic template settings
Ok at this point to see all this things run we have just to tell Firefox that there is a search plugin avaiable in our application. To do this just add this line to your ‘layouts/search.rhtml’
<link rel="search" type="application/opensearchdescription+xml" title="Search a City" href="http://YOUR-ADDRESS/search.xml" />
Before starting the WebBrick server just remember to create two views for the ‘index’ and the ‘you_choose’ action.
Sandro.
