Integrate address typeahead service with bootstrap form
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We are using melissa data for their typeahead service and would like to get it integrated in to a normal bootstrap form.

Here is our form - all default bootstrap

Here is the Melissa Service

Here is a running example of their code

Our goal is that the user can fill out our form and as they type address we will start suggesting back addresses, once they choose one we will fill in the, city etc.. We have a limited number of countries as a subset. The only deviation from our form is that we will likely need to have the user indicate Country before they start the form.

If the user chooses "copy to billing" we need to copy the above form items to the below, if they don't then we will need to do the same typeahead function for the billing info as well.

The last link asks for user/pass.
tomtoump over 4 years ago
updated the url - thanks
Qdev over 4 years ago
awarded to dekkard

Crowdsource coding tasks.

1 Solution

Winning solution

Here's the solution:

I created a simple bootstrap form with the same address fields as on your screenshot.

As in you use case, first you need to choose a country.

Then start typing in the Street Address. Current setting is minimum 4 characters for it to trigger. (This can be modified by changing the setting minLength : 4).

Autocomplete should then show up with matched addresses.

Choose one and it should populate the other fields.

Also, when Copy as Billing is ticked the data is copied over to the billing address part and the latter is disabled. Otherwise autocomplete is also available on the Street Address of the billing part.

Let me know if there's anything to improve here.

this is great thanks!
Qdev over 4 years ago