Mootools Autosuggestion Customisation

Question

One of my website extending http://digitarald.de/project/autocompleter/ plugin for autosuggest Country, State and City.

Eg: State should have two input like search text and country code.

From the documentation of the above plugin which using

'postVar' : 'text',
'postData':{'country':$('country'.get('value'))},

for passing multiple argument.

Here $('country') sets country code from the first suggestion. Now the problem is I can't send country as input because its sets from dynamic javascript call. How to solve the issue.

Tried as follows

 var countryAutocomplete = new Autocompleter.Request.JSON('countrySearch', 'www.example.com/country', {
          'postVar' : 'text',
          'minLength': 1,
          'injectChoice': function(areas){

            var choice = new Element('li', {'class': 'autocompleter-choices1', 'id':areas.label});
                new Element('div', {'html': this.markQueryValue(areas.label),'class': 'autocompleter-choice1'}).inject(choice);
                this.addChoiceEvents(choice).inject(this.choices);
                choice.store('autocompleteChoice', areas);

            }


        });


        //set the selected value in a hidden field
        countryAutocomplete.addEvent('onSelection', function(element, selected, value, input) {
            $('country').value = country =  selected.retrieve('autocompleteChoice').id;

            });

        // suggets states
        var stateAutocomplete = new Autocompleter.Request.JSON('stateTxt', 'www.example.com/state', {
          'postVar' : 'text',
          'postData':{'postData':{'country':$('country'.get('value'))},},
          'minLength': 3,
          'injectChoice': function(areas){

            var choice = new Element('li', {'class': 'autocompleter-choices1', 'id':areas.label});
                new Element('div', {'html': this.markQueryValue(areas.label),'class': 'autocompleter-choice1'}).inject(choice);
                this.addChoiceEvents(choice).inject(this.choices);
                choice.store('autocompleteChoice', areas);

            }


        });

Any help will be appreciate.

Thanks

score 0 · Accepted Answer · answered Jan 10 '12 at 13:03

it looks like

'postData':{'country':$('country'.get('value'))},

should be :

'postData':{'country':$('country').get('value')},

Also the "suggets states" should be updated each time the $('country') changes no ? If so, shouldn't you do the stateAutocomplete request on Selection of the countryAutocomplete ?

And

$('country').value = country =  selected.retrieve('autocompleteChoice').id;

looks like it would be better like this :

$('country')set("value",selected.retrieve('autocompleteChoice').id);

Cheers !

Mootools Autosuggestion Customisation

1 Answers1