Monday, August 1, 2011

Grails jQuery Ajax Autocomplete with jQuery-UI

Download Grails application framework for http://www.grails.org

Create grails application.

Download and install jQuery from (http://www.jquery.com) (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.*
add
def ajaxCityFinder = {
   def citiesFound = City.withCriteria {
         ilike 'city', params.term + '%'
        }
 render (citiesFound as JSON)
}

Update your gsp file with the following code:
<html>
    <head>
        <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" />
        <g:javascript>
            $(document).ready(function() {
               $('#city').autocomplete({
                 source: '<g:createLink controller='city' action='ajaxCityFinder'/>'
               });
               
            });       
        </g:javascript>
    </head>
    <body>
        <div class="demo">
            <div class="ui-widget">
                <label for="city">City: </label>
                <input id="city">
            </div>
        </div>
    </body>
</html>



it may work!!!
Source at  https://github.com/miserableme/myAjaxExperiments.git

21 comments:

  1. Perfecto me funciono
    Its perfect

    ReplyDelete
  2. Awesome article. It is so detailed and well formatted that i enjoyed reading it as well as get some new information too.
    Aws Training in Pune

    ReplyDelete
  3. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    Devops Training in pune

    Devops training in tambaram
    Devops training in velachery
    Devops training in annanagar
    DevOps online Training

    Devops Training in Chennai

    ReplyDelete
  4. Thanks for such a great article here. I was searching for something like this for quite a long time and at last I’ve found it on your blog. It was definitely interesting for me to read  about their market situation nowadays.

    java training in chennai | java training in bangalore

    java online training | java training in pune

    ReplyDelete
  5. Nice blog..! I really loved reading through this article. Thanks for sharing such
    a amazing post with us and keep blogging...Well written article Thank You for Sharing with Us pmp training Chennai | pmp training centers in Chenai | pmp training institutes in Chennai | pmp training and certification in Chennai | pmp training in velachery

    ReplyDelete
  6. Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us

    devops online training

    aws online training

    data science with python online training

    data science online training

    rpa online training

    ReplyDelete
  7. This post is really nice and informative. The explanation given is really comprehensive and informative. sharepoint administrator training by 10+ years experienced faculty.

    ReplyDelete
  8. I am inspired with your post writing style & how continuously you describe this topic. microsoft azure training After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.

    ReplyDelete
  9. This is so elegant and logical and clearly explained. Brilliantly goes through what could be a complex process sharepoint training online and makes it obvious.

    ReplyDelete
  10. this is really helpful in a lot of manners

    BEST ANGULAR JS TRAINING IN CHENNAI WITH PLACEMENT

    https://www.acte.in/angular-js-training-in-chennai
    https://www.acte.in/angular-js-training-in-annanagar
    https://www.acte.in/angular-js-training-in-omr
    https://www.acte.in/angular-js-training-in-porur
    https://www.acte.in/angular-js-training-in-tambaram
    https://www.acte.in/angular-js-training-in-velachery

    ReplyDelete
  11. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. The angular js programming language is very popular which are most widely used.

    Nice to see. This blog



    Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery







    ReplyDelete
  12. Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this. Software Testing Training in Chennai | Software Testing Training in Anna Nagar | Software Testing Training in OMR | Software Testing Training in Porur | Software Testing Training in Tambaram | Software Testing Training in Velachery

    ReplyDelete
  13. wonderful article contains lot of valuable information. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. . AWS Training in Chennai Velachery OMR

    ReplyDelete