Link to home
Start Free TrialLog in
Avatar of freshgrill
freshgrill

asked on

Multiple auto-complete fields with single soruce

Below is code for a jquery autocomplete and it works fine for the user to select a single country. However, we want the user to match multiple countries using the same autocomplete source.

Without hardcoding  and copying the jquery portion using a difference (ie. country-1, country-2) for the source (a difference in the field name is okay) , how can we use the same jquery portion (source) for multiple form fields ?

Example (user input does autocomplete from same source):

1) Picture of US flag, input for user text of name of country.
2) Picture of UK flag, input for user text of name of country.
3) Picture of China flag, input for user text of name of country.
4) Picture of Mexico flag, input for user text of name of country.


Currently:
\$( "#country-name" ).autocomplete({
            source: "country-search.pl",
            minLength: 2,
    select: function(event, ui) {
        event.preventDefault();
        \$("#country-name").val(ui.item.label);
        \$("#country").val(ui.item.value);
    },
    focus: function(event, ui) {
        event.preventDefault();
        \$("#country-name").val(ui.item.label);
                               }
        });

Open in new window


<input type="hidden" value="" name="country" id="country"><input name="country-name" id="country-name" value=""/>

Open in new window



Desired (all the country fields use country-search.pl for autocomplete):
\$( "#country-name" ).autocomplete({
            source: "country-search.pl",
            minLength: 2,
    select: function(event, ui) {
        event.preventDefault();
        \$("#country-name").val(ui.item.label);
        \$("#country").val(ui.item.value);
    },
    focus: function(event, ui) {
        event.preventDefault();
        \$("#country-name").val(ui.item.label);
                               }
        });

Open in new window


<input type="hidden" value="" name="country-1" id="country-1"><input name="country-name-1" id="country-name-1" value=""/>
<input type="hidden" value="" name="country-2" id="country-2"><input name="country-name-2" id="country-name-2" value=""/>
<input type="hidden" value="" name="country-3" id="country-3"><input name="country-name-3" id="country-name-3" value=""/>
<input type="hidden" value="" name="country-4" id="country-4"><input name="country-name-4" id="country-name-4" value=""/>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of freshgrill
freshgrill

ASKER

@ leakim971: it is now showing all the autocomplete for all the fields, but when I select the country the selected country is now showing up.
please provide a link to see your page.
I had to remove the select and focus portions - but then it all worked.