How to automatically fill in a field?

Question

I have a form where I want to ask District and County using the Postal code and showing the fields I want with auto-fill.

For example:

One places the Postal Code "5489-698" and Aparece district and County automatically.

I already downloaded the file(txt) with the zip codes.

Someone’s already done it?

Answer 1

This type of fill is done with ajax, it is not necessary to have a local base with the data as it is possible to use the mail api.

Follow a link with a great explanation and tutorial.

http://novos-cientistas.blogspot.com.br/2013/05/webservice-utilizando-api-dos-correios.html

Answer 2

The best thing to do is create a table in the database and insert all postal codes with the respective districts and municipalities.

In HTML do the following, after the client fills the field use AJAX to make a request to a PHP passing as a parameter the filled postcode. PHP does a database search by zip code and returns the district and county or an error if it finds nothing. Make a return in JSON, it is better.

Make the ajax request only after you have all the characters filled in, if you make a request for each character filled in it will overload the server without need.

Answer 3

It would be very interesting to know how is organized the txt file with the postal information.

Here in Brazil there is a free Web Service available on Virtual Republic that may be useful. There are several explanations and examples of how to use in several languages.

There is also Geonames, international, and several other Web Services available with a list of several countries. It would be interesting to search more later.

If you still need to use the txt file, try the following. Most of the time they are CSV type files (Comma Separated Values). It has a very good publication on this blog on how to use this type of file in PHP; passing to an Array you can browse it for information.

Regardless of how you can extract data from the data table, you will need Javascript to build an AJAX function that automatically inserts the data. How to do this?

First create the fields in your HTML and give a different and specific ID to each of them. Ex.:

<input type="text" id="codigo-postal" /><br />
<input type="text" id="concelho" />

Then create an event so that when the user leaves the zip code the data is searched and filled in automatically. For ease, we may use the jQuery Javascript library.

$("#codigo-postal").focusout(function() {
    $.getJSON( "busca_codigo.php", {
        codigo: $("#codigo-postal")[0].value
        } )
        .done(function( data ) {
            if(data.encontrou == 1) {
                $("#concelho")[0].value = data.conselho
            } else {
                alert("Código não encontrado!");
            }
    });
});

An important detail that makes the work much easier is that the data is being passed on in JSON format. An array of data this way can be easily obtained through PHP and easily handled through Javascript.

It may be that, depending on the database, the iterative search in the txt file gets a little slow and consumes many server resources. Try to use a trusted Web Service that already exists or migrate the data to an SQL Database, for example; something that offers a more optimized search.

The API address that is placed at the beginning of the jQuery.getJSON function must be under the same domain as the HTML page. For security reasons modern web browsers block access to external addresses through these functions. Therefore, if you are going to use an external API/Web Service, still write a PHP script to take this data and pass it to Javascript.

I hope it helped.