jQuery autocomplete: How to complete multiple fields when entering data into one of them?

Question

For my site I need the registering users to enter their zipcode and city, and entering a city should be enough for the page to auto-complete the zipcode.

Let's say I have both fields:

<input id="city" name="city_field" type="text">
<input id="zip" name="zip_field" type="text">

To auto-complete the city, I have this code, which works perfectly fine:

<script type="text/javascript">
    var data = ['New York', '...']; //I keep the entire list here
    $(document).ready(function(){
        $("#city").autocomplete({
            source: data
        });
    });
</script>

Now, how do I auto-complete the zipcode right when the city is entered?

(I keep all of the data in variables, so there is no need to connect to database)

Jan Dragsbaek · Accepted Answer · 2011-11-23 14:21:48Z

2

You need to use the event-select thats available in autocomplete.

answered Nov 23, 2011 at 14:21

Jan Dragsbaek

8,1212 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NoobDev4iPhone Over a year ago

Since I'm new to jQuery, can you please give a snippet code so that I know what to do exactly. I'll greatly appreciate it.

Jan Dragsbaek Over a year ago

Id suggest you to actually try and play around with it instead of asking us for snippets.

score 0 · Accepted Answer · 2011-11-23 14:39:52Z

0

Something like this

<script type="text/javascript">
var data = ['New York', '...']; //I keep the entire list here
$(document).ready(function(){
    $("#city").autocomplete({
        source: data,
        select: function(event, ui) {
            $("input#city").val(ui.item.value);
            $("input#zip").val(foo(ui.item.value)); // TODO Map to zip
            return false;
        },
    });
});
</script>

edited Nov 23, 2011 at 14:39

answered Nov 23, 2011 at 14:31

user425367

Collectives™ on Stack Overflow

jQuery autocomplete: How to complete multiple fields when entering data into one of them?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related