I am quite new to socialegine module development. I want to use multiple autocomplets on my one form. I have no problem of showing multiple auto completes but problem comes when one selects options from auto complete.

I have seen that autocompet.js uses id toValues to show selected option from autocomlte. So if there is only one autocomplete on one form then we can have one element as toValues to show the selected value. But if we have multiple auto completes then how to show the selected item of each auto complete as separately? Using the following code for autocomplete

 en4.core.runonce.add(function() {

  new Autocompleter.Request.JSON('to', '<?php echo $this->url(array('module' => 'localspots', 'controller' => 'lookup', 'action' => 'city'), 'default', true) ?>', {
    'minLength': 2,
    'delay' : 1,
    'selectMode': 'pick',
    'autocompleteType': 'message',
    'multiple': false,
    'className': 'message-autosuggest',
    'filterSubset' : true,
    'tokenFormat' : 'object',
    'tokenValueKey' : 'label',
    'injectChoice': function(token){
      console.log(token.type);
      var choice = new Element('li', {'class': 'autocompleter-choices', 'html': token.photo, 'id':token.label});
      new Element('div', {'html': this.markQueryValue(token.label),'class': 'autocompleter-choice'}).inject(choice);
      this.addChoiceEvents(choice).inject(this.choices);
      choice.store('autocompleteChoice', token);
    },
    onPush : function(){
      if( $('toValues').value.split(',').length >= maxRecipients ){
        $('to').disabled = true;
        $('to').setAttribute("class", "disabled");     
      }
    },
  });

});