jqueryjquery-uigrailsautocompletegrails-2.4

Grails - jQuery UI Autocomplete not working

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?

Solution

  • 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.