Tutorial Purpose:
This tutorial will help you create an in-site search box that users can
type in to search within your site. The search will utilize google’s
api search to find anything within your site, and return all results to
the index.html.erb file specified in one of the search results views.
The returned results look almost exactly like a normal google search
result, only the results are housed on your site and the search
parameters are only looking within your site.
Here is the gist that contains all of the files or code you will need
when reading through this tutorial.
What you need to do (step by step):
The files below are just summaries provided to help you understand what
each file located in the gist does, and any information you may need to
get you started. I would look over the files to familiarize yourself
with them and then skip down to the full instructions at the end of this
tutorial to get started.
(( Files )):
=========================
default.css
This file is just a standard css file. You can add this code to your
existing css file and change the url for the custom background image.
The custom background image applies to the text box that will be typed
in when searching your site. I usually create a shader type file here
that adds shadow effects to the search box.
=========================
index.html.erb
This file is the index file that will be located within Views >
Search_Results > index.html.erb.
You can place this code anywhere in the file. My sites usually house a
web layout that applies to my entire site, which acts as a layout
wrapper. So, this index.html.erb file fits snugly within the wrapper of
my site.
The file will be used to return google results to your site for everyone
to view.
When you signup to the google CSE site, you will be given a long Search
engine unique ID: that appears like this:
Search engine unique ID: 014474709566007599110:gncni50kmn0
You will need to alter the index.html.erb file above and replace this
string in all of the following areas:
results_014474709566007599110:gncni50kmn0 WHERE
results_YourUniqueSearchEngineIdGoesHere
searchbox_014474709566007599110:gncni50kmn0 WHERE
searchbox_YourUniqueSearchEngineIdGoesHere
There are a total of two results_ and one searchbox_ areas you need to
alter and change.
=========================
routes.rb
You will need to add the routes to your routes.rb file so the searchbox
works.
=========================
search.js
Create a search.js file and place this file in your public\javascripts
directory with the code listed in this file.
=========================
searchbox.html.erb
This file is not really a view, but more of a code snippet to use within
a view. This file houses the searchbox itself that users will be typing
in to search your site. So, for instance, on my site I have this code
located in an IFrame. You can place this anywhere you’d like though to
test it.
Remember, this is only a code snippet and you are not creating an erb
view with the name listed above.
==============================================
INSTRUCTIONS FOR IMPLEMENTING THIS SEARCH BOX
- Visit the following google site and signup to create your custom
search box. Please keep in mind, you are going to choose “standard”
which is free when signing up. Click the “Create a Custom Search Engine”
button to begin.
- Go to your rails app and generate the following controller:
ruby script/generate controller search_results index
-
Go to your routes and add the routes.rb code provided in the
routes.rb file. -
Create the search.js javascript file and place it in your
public\javascripts directory. There are two images located in the
search.js which apply to button arrows on my site (ie a button click).
You can modify this and replace it with your own buttons. Buttons
aren’t necessary to search with but I’m just letting you know about this
possible change. -
Add the custom css code to your site’s css file. The background
image url can be removed or you can add a custom image. I like nice
views so do what you want here. -
Go to your views → search_results → index.html.erb file and
replace the entire file with the index.html.erb file listed in the gist
above. Edit the places in the file which will house your Search Engine
Unique ID as per the file instructions above in the file summary. -
Add the code snippet located in searchbox.html.erb to any view page
that you want to use to test the searchbox. Keep in mind that you do
not have to create a new view. You can add it directly to a page in
your existing site and test it. -
Start your server and search and test the results.
=========================
Follow Up Notes
In development your site might house a url like http://localhost:3000/
and you might be wondering how search results will work in development.
It’s pretty easy. The site you use when signing up with google is the
site that is being searched. So, if your site was http://microsoft.com
it would search microsoft.com in both development and production.
You could feasibly create many different search boxes to use on your
site that house custom searches to other pages that your users visit or
use on your site.
I hope you enjoy this quick tutorial and yes, the search box feature is
very nice and works great. While I don’t have screenshots to show you
the end result or a site demo, just take my word that you won’t be
disappointed testing this out just for fun.