Implementing search using this plugin is actually quite simple, as I will demonstrate in this post.
Step 1: Download & Install Searchable plugin
The first step is to download and install the Searchable plugin. Navigate to your project folder and issue the following command from a console window.
Please note this assumes you are using JDK1.5+. If however, you're still using JDK1.4, then invoke the above command ensuring that the term 'searchable' is replaced with 'searchable14'.
Step 2: Modify Domain class
Open up your Domain class and add the statement 'static searchable = true '. In the example below, my domain class is called Issue and is a simplification of an actual class that I'm developing for a pet project. This flag enables the plugin to identify which records are available for search.
Step 3: Create Search Textfield.
The next step is to provide a search box into which the User can enter search parameters. I do this by creating a search textfield like the one below,
The textfield is embedded within a form that will pass its contents to an 'index' action on the plugins 'search' controller, either when the User clicks on the 'search' button or hits the 'enter' key.
To show what this would look like, I've knocked up a simple web app using the Issue class above. We now have something that looks like this
You can clearly see the search box at the top of the navigation bar. I've used the bootstrap class to create some test data which are shown in the table. This data will enable me to demonstrate that the search capability works and returns the expected results.
Entering a value of "CLOSED" into the search box returns the following response,
Step 4: Edit View for Search Results
Create a new folder 'searchable' under grails-app/views.
In this folder we want to place a copy of the view used by the plugin to display the results. The copy will subsequently be modified to generate a view that is consistent with our web application. So copy the file web-app/plugins/searchable-0.5.1/grails-app/views/searchable/index.gsp into the newly created folder. Here /web-app/ is the name of your project and searchable-0.5.1 refers to the version of the plugin that is in use. For my case, this happens to be 0.5.1. Check the version that you have downloaded and adjust accordingly.
Next we modify index.gsp in the following way,
- Delete all the css styling defined within the <head> tags
- Place the following meta-tag between the <head> tags
Following these two steps should be sufficient to generate a results view that is consistent with your application. However for my application, I had to perform an extra step and rename the id's for the <header> and <main> divs. This was to prevent a conflict with css styling from my own style sheet.
The end result now looks like
This completes the tutorial, which I hope you will find useful. My intention was to enable you to get started quickly and in that respect the post has not and could not cover the full power of this fantastic plugin. That may be a task for another day.
The example code demonstrated here is available for download [compass.zip] from here. Please note that this is missing the plugin. I had to delete that in order to comply with the File Upload limit. However this shouldn't be a problem if you follow the installation instructions given above.