Autocomplete multiple text fields

There's a lot of auto-complete libraries, if it provides a single input auto-completion then obviously you can apply the same on other fields.

Example using jQuery-UI : http://jsfiddle.net/2opm0zuv/

If you do not want to rely on a pre built library you can roll your own: With AJAX post the text the user puts in to a controller, get the result back from the controller and do the fill in in your frontend with JS

You probably mean that if for example a

• user types a street name in the form field "Street",
• the user gets an autocomplete drop down with possible address matches, and
• after selecting one address, not only the street form field is filled in, but also other fields like postal code, city, etc?

In that case, you can use a library like jQuery UI. What I've done is something like:

    $("#route_name").autocomplete({
        minLength: 2,
        source: function( request, response ) {
            $.ajax({
                url: "http://myproject/app/routes/all/",
                dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                success: function( data ) {
                    response( $.map( data, function( item ) {
                        return {    label: item.route_name+', '+item.route_grade+', '+item.area_name, 
                                    value: item.route_name, //value: item.route_name+', '+item.route_grade+', '+item.area_name, 
                                    id: item.route_id,
                                    route_grade: item.route_grade,
                                    route_type: item.route_type,
                                    area_name: item.area_name,
                                    sector_name: item.sector_name,
                                    country_name: item.country_name
                                    }   
                    }));
                }
            });
        },
        select: function (event, ui) {
            $('#route_name').val(ui.item.value);
            $('#grade').val(ui.item.route_grade);
            $('#area_name').val(ui.item.area_name);
            $('#sector_name').val(ui.item.sector_name);
            $('#country_name').val(ui.item.country_name);
            $('#route_id').val(ui.item.id);

            var $radios = $('input:radio[name=route_type]');
            if($radios.is(':checked') === false  && ui.item.route_type == 'route') {
                $radios.filter('[value=route]').prop('checked', true);
            }
            if($radios.is(':checked') === false  && ui.item.route_type == 'boulder') {
                $radios.filter('[value=boulder]').prop('checked', true);
            }
            return false;
        },
    });

So as you can see, the user starts typing a Route name. If matches are found from doing an ajax request to http://myproject/app/routes/all returning json, the user can select one and the other fields are filled in with the right values. The code can probably be improved a lot, but maybe it gives you some ideas.

i remember I did this with typeahead library.

Just return a whole json object and handle the filling of the fields in a success callback.