Monday, August 1, 2011

Grails jQuery Ajax Autocomplete with jQuery-UI

Download Grails application framework for

Create grails application.

Download and install jQuery from ( (copy the JavaScript files to your grails app home web-app/js folder)

Download and install jQuery ui plugin

Create a domain class "City"

package myapp
class City {
    String city
    static constraints = {
        city nullable:false, blank:false, maxSize:200

create controller
grails create-controller city
edit the CityController,
import grails.converters.*
def ajaxCityFinder = {
   def citiesFound = City.withCriteria {
         ilike 'city', params.term + '%'
 render (citiesFound as JSON)

Update your gsp file with the following code:
        <meta name="layout" content="main" />

        <link rel="stylesheet" href="${resource(dir:'css/smoothness',file:'jquery-ui-1.8.14.custom.css')}" />

        <g:javascript library="jquery.min" />
        <g:javascript library="jquery-ui-1.8.14.custom.min" />
            $(document).ready(function() {
                 source: '<g:createLink controller='city' action='ajaxCityFinder'/>'
        <div class="demo">
            <div class="ui-widget">
                <label for="city">City: </label>
                <input id="city">

it may work!!!
Source at


  1. Perfecto me funciono
    Its perfect

  2. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    PHP Training in Chennai

  3. take a look at this autocomplete, it's awesome,