2

I'm trying to use jQuery UI Autocomplete in my input field. This is my code in controller.

import grails.converters.*

class SomeController {
    def someClassList = {
        def list1 = SomeClass.list()
        def scList = []
        list1.each {
            scList.add(it.someClassAttribute)
        }
        render scList as JSON
    }
}

I have this in my view.

<head>
...
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
    <script>
        $(document).ready(function() {

            var someTags = "${someClassList}";
            $( "#tags" ).autocomplete({
                source: someTags,
                minLength: 2
            });

        });

</script>

But when gsp code is generated it includes <...autocomplete = "off"...>

<input type="text" name="someTitle" id="tags" required="" value="" class="ui-autocomplete-input" autocomplete="off">

I looked at the post Tokeninput Autocomplete not working in grails but it is not working for me. Please help. Thanks in advance.

EDIT This is my gsp code inside _form.gsp.

<g:textField name="someTitle" id="tags" required="" value="${someClassInstance?.someTitle}"/>

EDIT - ADDITIONAL QUESTION I changed the source to this and it works. 

source: "/myAppName/someControllerName/someClassList"

BUT, the entire autocomplete list shows and doen't narrow down. Any ideas?

Community
  • 1
  • 1
monty_bean
  • 494
  • 5
  • 25
  • What does your `` look like in the .gsp? – tylerwal Dec 09 '15 at 21:26
  • @tylerwal, I've included my .gsp code. Thanks. – monty_bean Dec 10 '15 at 14:26
  • What does ${someClassList} show up as in the actual html do in the gsp as in 
    ${someClassList}
     – V H Dec 10 '15 at 17:20
  • @vahid, it was blank "" until I changed the path to this. source: "/myAppName/someControllerName/someClassList" Now the list pops up when I type 2 letters but it doesn't narrow down. The entire list is there. – monty_bean Dec 10 '15 at 18:58
  • Hmm.. So I do need to look into ajax... I was told Grails has web service integrated and doesn't need to do anything else. Thank you for the tip. I will look into it and will come back if I have more issues. – monty_bean Dec 10 '15 at 19:22
  • Sorry removed my comment. As I said take a look at ajaxdependancyselection. In the case of a primary object entire list is sent back as json like yours. – V H Dec 10 '15 at 19:31
  • 1
    http://stackoverflow.com/questions/10433858/jquery-ui-autocomplete-in-grails http://ohmiserableme.blogspot.co.uk/2011/08/grails-jquery-ajax-autocomplete-with.html & http://kszydlo.blogspot.co.uk/2013/08/in-my-first-post-ill-show-you-how-to.html & http://jay-chandran.blogspot.co.uk/2011/09/using-grails-with-jquery-autocomplete.html follow an example – V H Dec 11 '15 at 09:55
  • Thanks @vahid, I followed the example from one of your link (miserableme) and it worked. Thanks a lot. If you post your comment under answer I will accept it as an answer. – monty_bean Dec 14 '15 at 15:54

1 Answers1

0

no worries added as answer. The link that worked for you was: http://ohmiserableme.blogspot.co.uk/2011/08/grails-jquery-ajax-autocomplete-with.html

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>

Although I haven't tested this I still think if you put a println in the controller each time you press a key it is sent back to get a new list no ?

Sadly it's how ajax works.

Check out the boselecta plugin in my repo - take a look at how I have done auto complete in that plugin. As in HTML 5 Data List. You may find its nicer to work with. Actual gsp doing the auto complete. The component that receives the dataList from websockets.

I recently did some work on this so that the dataList id/Element are selectable and javascript at bottom of first gsp converts the labels to selected values.

V H
  • 8,382
  • 2
  • 28
  • 48
  • Yes, I put println under render as JSON line and every time I entered a new sequence of strings, it generated a list like this. ([abcd, abcde, abcdef] \n [abcde, abcdef] \n [abcdef] \n [] ) I can see how this can be redundant when you have a huge DB. Thanks. I will also take a look at boselecta plugin as well. – monty_bean Dec 14 '15 at 16:39