Sending vars to server using MagicSuggest

Question

Im using this great jquery plugin to handle autocomplete on textboxes, i got everything working using this script:

        var ms1;
        $(document).ready(function() {
                ms1 = $('#ms1').magicSuggest({
                data: 'http://punctis.com/app_dev.php/ajax/autocompletefeed/1/city',
                sortOrder: 'name',
                minChars: 2,
                maxResults: false,
                allowFreeEntries: false,
                selectionPosition: 'right',
                groupBy: 'utenti',
                maxDropHeight: 200
            });
        });

And this Html:

<form name="email_form">
  <input id="test_normalValue" name="test_normalValue" type="text" class="input-large">
  <input id="ms1" name="ms1" type="text" class="input-large">
</form>

But when i POST or GET the form no value is sended, just the test_normalValue. Does anybody encounter this problem too?

PS: According to this thread this functionality is present since 1.1.2 (im using 1.2.3)

Answer 1

You need to add a name property to your configuration:

    var ms1;
    $(document).ready(function() {
            ms1 = $('#ms1').magicSuggest({
            data: 'http://punctis.com/app_dev.php/ajax/autocompletefeed/1/city',
            sortOrder: 'name',
            minChars: 2,
            maxResults: false,
            name: 'ms1',
            allowFreeEntries: false,
            selectionPosition: 'right',
            groupBy: 'utenti',
            maxDropHeight: 200
        });
    });

and you should retrieve the value in $_POST['ms1'], which will actually be an array of city ids.

[EDIT] If you need the city names instead of the city IDs, you can specify the valueField in your configuration property and set it to 'name', like this:

    var ms1;
    $(document).ready(function() {
            ms1 = $('#ms1').magicSuggest({
            data: 'http://punctis.com/app_dev.php/ajax/autocompletefeed/1/city',
            sortOrder: 'name',
            valueField: 'name',
            minChars: 2,
            maxResults: false,
            name: 'ms1',
            allowFreeEntries: false,
            selectionPosition: 'right',
            groupBy: 'utenti',
            maxDropHeight: 200
        });
    });

That way the component will use the names as IDs instead of the ids themselves.

If you need both the IDs and the names for whatever reason, you can use the beforeload event to set additional custom POST parameters.