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

freshgrillAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Use :
$( "[id^='country-name']" ).autocomplete({ // better to use a class here...
            source: "country-search.pl",
            minLength: 2,
    select: function(event, ui) {
        event.preventDefault();
        $(event.target).val(ui.item.label);
        $(event.target).val(ui.item.value);
    },
    focus: function(event, ui) {
        event.preventDefault();
        $(event.target).val(ui.item.label);
                               }
        });

Open in new window

0
 
freshgrillAuthor Commented:
@ 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.
0
 
leakim971PluritechnicianCommented:
please provide a link to see your page.
0
 
freshgrillAuthor Commented:
I had to remove the select and focus portions - but then it all worked.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.