# Tutorial - Creating a Custom Google In-site Search for Rails **URL:** \ **Category:** Rails\ **Created:** [December 30, 2009, 7:43pm UTC](https://www.ruby-forum.com/t/tutorial-creating-a-custom-google-in-site-search-for-rails/180865 "2009-12-30T19:43:15Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![elricstorm](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/da6949/32.png) [@elricstorm](https://www.ruby-forum.com/u/elricstorm)\ **Post date:** [December 30, 2009, 7:43pm UTC](https://www.ruby-forum.com/t/tutorial-creating-a-custom-google-in-site-search-for-rails/180865/1 "2009-12-30T19:43:15Z")
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. > > > There are more than three files. show original 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 1. 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. > **[Programmable Search Engine by Google](https://programmablesearchengine.google.com/about/)** > > Help people find what they need on your website. Add a customizable search box to your web pages and show fast, relevant results powered by Google. 1. Go to your rails app and generate the following controller: ruby script/generate controller search\_results index 1. Go to your routes and add the routes.rb code provided in the routes.rb file. 2. 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. 3. 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. 4. 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. 5. 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. 6. Start your server and search and test the results. # ========================= Follow Up Notes In development your site might house a url like [http://localhost:3000/](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](http://microsoft.com) it would search [microsoft.com](http://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.