grails jquery auto complete selected ID for another secondary auto complete function

Question

I have been following the guide from Alidad's blog to enable jquery auto completion within grails:

http://alidadasb.blogspot.co.uk/2011/12/enabling-jquery-autocomplete-with.html

Country.groovy

package rentspace
    class Country {
         String name
         static hasMany = [cities:City] 
    }

City.groovy

package rentspace

class City {
    //static belongsTo = [country:Country]
    static belogsTo = Country
    Country  country
    String name
    static constraints = {}
}

GSP Page:

<g:autoComplete id="countrySearch"
                action='autocompleteCountry'
                controller='any'
                domain='rentspace.Country'
                searchField='name'
                collectField='id'
                value=''
/>

<g:textField id="hiddenState"  name="hiddenState" value=""/>

<label>City:</label>
<g:autoComplete name="citySearch" id="citySearch"
                cid=""
                action='autocompleteCityAction'
                controller='any'
                domain='rentspace.City'
                searchField='name'
                value=''
/>

AutoCompleteTagLib.groovy

package rentspace

class AutoCompleteTagLib {
 ..
                if (attrs.style) styles = " styles='${attrs.style}'"

        if (attrs.cid) 
           cid="&cid="+attrs.cid
        else
          cid=""

             .......

                out << "&order="+attrs.order
        out << ""+cid



                out << "&collectField="+attrs.collectField

        out << "',select: function(event, ui) {"
        out << "    \$('#hiddenState').val(ui.item.id);},"
        //out << "  \$('#citySearch').attr('cid',ui.item.id);},"
        out <<" search: function() {"
        out << "\$('#hiddenState').val('');"
        //out << "\$('#citySearch').attr('cid','');"
        out <<"}"   

                out << ", dataType: 'json'"
                out << "});"
        out << "    });"
        out << "</script>"

        }

        def autoCompleteHeader = {
                out << "<style>"
                out <<  ".ui-autocomplete-loading"
                out << "        { background: white url(${resource(dir:'images',file:'ajax-loader.gif')}) right center no-repeat   }"
                out << " </style>"
        }
}

My question is related to dual values returned by jquery, it does appear to be working if I return the value to a hidden or text field box. What I am trying to do is return the country id to the second auto complete box being citySearch. So once the user auto completes the country the country id is returned as cid='1' or whatever the id is to the cid attribute of citySearch auto complete box.

in the tag lib there is a segment commented out which is where it succeeds in returning or updating the value of hiddenState field but no matter what attempt made to update the cid value I keep on failing ?

        //out << "  \$('#citySearch').attr('cid',ui.item.id);},"

Has anyone succeeded in doing anything like this ?

E2A:

https://github.com/vahidhedayati/grailscountrycity

Project can be downloaded from above link, there is some more information regarding the issue within the readme

Answer 1

Issue has been solved here by Alidad: { countryid: \$('#hiddenField').val() }

https://github.com/alidadasb/CountryCityAutoComplete

out << "\$('#" + attrs.id+"').autocomplete({ "
                    out << " source: "
                    out << " function(request, response) { "
                    out << " \$.getJSON(' "
                    out << createLink(link)
                    out << "?"
                    out << "term=' + request.term + '"
out << "&domain="+ attrs.domain
                    out << "&searchField="+attrs.searchField
                    out << "&max="+attrs.max
                    out << "&order="+attrs.order
                    out << "&collectField="+attrs.collectField
                    out << "', { countryid: \$('#hiddenField').val() }, "
                    out << " response); } "
                    out << ", dataType: 'json'"
                    out << "});});"
                    out << "</script>"

Working version can be seen here: http://countrycity.cloudfoundry.com