title: grails jquery auto complete selected ID for another secondary auto complete function
body: <p>I have been following the guide from Alidad's blog to enable jquery auto completion within grails:</p>
  
  <p><a href="http://alidadasb.blogspot.co.uk/2011/12/enabling-jquery-autocomplete-with.html" rel="nofollow">http://alidadasb.blogspot.co.uk/2011/12/enabling-jquery-autocomplete-with.html</a></p>
  
  <p>Country.groovy </p>
  
  <pre><code>package rentspace
      class Country {
           String name
           static hasMany = [cities:City] 
      }
  </code></pre>
  
  <p>City.groovy </p>
  
  <pre><code>package rentspace
  
  class City {
      //static belongsTo = [country:Country]
      static belogsTo = Country
      Country  country
      String name
      static constraints = {}
  }
  </code></pre>
  
  <p>GSP Page:</p>
  
  <pre><code>&lt;g:autoComplete id="countrySearch"
                  action='autocompleteCountry'
                  controller='any'
                  domain='rentspace.Country'
                  searchField='name'
                  collectField='id'
                  value=''
  /&gt;
  
  &lt;g:textField id="hiddenState"  name="hiddenState" value=""/&gt;
  
  &lt;label&gt;City:&lt;/label&gt;
  &lt;g:autoComplete name="citySearch" id="citySearch"
                  cid=""
                  action='autocompleteCityAction'
                  controller='any'
                  domain='rentspace.City'
                  searchField='name'
                  value=''
  /&gt;
  </code></pre>
  
  <p>AutoCompleteTagLib.groovy</p>
  
  <pre><code>package rentspace
  
  class AutoCompleteTagLib {
   ..
                  if (attrs.style) styles = " styles='${attrs.style}'"
  
          if (attrs.cid) 
             cid="&amp;cid="+attrs.cid
          else
            cid=""
  
               .......
  
                  out &lt;&lt; "&amp;order="+attrs.order
          out &lt;&lt; ""+cid
  
  
  
                  out &lt;&lt; "&amp;collectField="+attrs.collectField
  
          out &lt;&lt; "',select: function(event, ui) {"
          out &lt;&lt; "    \$('#hiddenState').val(ui.item.id);},"
          //out &lt;&lt; "  \$('#citySearch').attr('cid',ui.item.id);},"
          out &lt;&lt;" search: function() {"
          out &lt;&lt; "\$('#hiddenState').val('');"
          //out &lt;&lt; "\$('#citySearch').attr('cid','');"
          out &lt;&lt;"}"   
  
                  out &lt;&lt; ", dataType: 'json'"
                  out &lt;&lt; "});"
          out &lt;&lt; "    });"
          out &lt;&lt; "&lt;/script&gt;"
  
          }
  
          def autoCompleteHeader = {
                  out &lt;&lt; "&lt;style&gt;"
                  out &lt;&lt;  ".ui-autocomplete-loading"
                  out &lt;&lt; "        { background: white url(${resource(dir:'images',file:'ajax-loader.gif')}) right center no-repeat   }"
                  out &lt;&lt; " &lt;/style&gt;"
          }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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 ?      </p>
  
  <pre><code>        //out &lt;&lt; "  \$('#citySearch').attr('cid',ui.item.id);},"
  </code></pre>
  
  <p>Has anyone succeeded in doing anything like this ?</p>
  
  <p>E2A:</p>
  
  <p><a href="https://github.com/vahidhedayati/grailscountrycity" rel="nofollow">https://github.com/vahidhedayati/grailscountrycity</a></p>
  
  <p>Project can be downloaded from above link, there is some more information regarding the issue within the readme</p>