Wouldn't it be cool to be able to allow users to automatically fill parts of a form, especially the location part of addresses? Services like FireEagle allow you to do that but it is not very likely that mainstream users will have signed up to them.

One thing we can do is recognise the user's IP number or allow the user to enter one thing and try to guess the rest for them. GeoFill is a JavaScript wrapper library that uses Yahoo Geo and GeoIP to do that for you. Try the following examples:

Examples

Source

(function(){
  geofill.find(
    {
      callback:function(o){
        var ad = document.getElementById('address');
        var html = '<h3>Is this where you are?</h3>';
        html+='<p>We think you are in '+o.city+', '+
              o.country+'</p>';
        html+='<p>Is this right?</p>';
        var div = document.createElement('div');
        div.setAttribute('id','suggest');
        div.innerHTML = html;
        var but = document.createElement('input');
        but.setAttribute('type','button');
        but.setAttribute('value','Yes, use this');
        div.appendChild(but);
        but.onclick = function(){
          $('usercity').value = o.city;
          $('usercountry').value = o.country;
          $('userpostcode').value = o.postcode;
          $('userlat').value = o.latitude;
          $('userlon').value = o.longitude;
          function $(id){
            return document.getElementById(id);
          }
          var mom = this.parentNode;
          mom.parentNode.removeChild(mom);
        }    
        ad.parentNode.insertBefore(div,ad.nextSibling);
      }
    }
  );
})();

Demo

Address

Using GeoFill

GeoFill is a JavaScript that you simply embed in your document. It has two methods for you to use:

geofill.find(properties) does an IP lookup of the current user and tries to get the geographical data from that one.

geofill.lookup(properties,postcode) tries to get the geographical data from the postcode provided in your form (postcode is optional, see below).

For each method the properties are the same, a list of the IDs of your form fields and a callback method.

Say for example you want to use lookup and fill out only the city, all you need to is:


geofill.lookup(
  {
    'city':'usercity',
    'postcode':'userpostcode',
  }
);

Where usercity and userpostcode are the IDs of your form fields. GeoFill always returns city, country, postcode, latitude and longitude.

The callback method allows you to deal with errors and re-use the information in case you don't want to make GeoFill access your form automatically. The data sent to the callback method is either an object with all the available geo data or an object with an error property. This way you can catch the error case:


geofill.lookup(
  {
    'city':'usercity',
    'postcode':'userpostcode',
    callback:function(o){
      if(o.error){
        pc.value = 'Invalid Postcode';
      } else {
        //but.parentNode.removeChild(but);
      }
    }
  }
);

Or you can fully skip the automatic access of your form fields:


geofill.find(
  {
    callback:function(o){
      // do something with o
    }
  }
}

The lookup method also takes a second parameter in case you don't want to use any form:


geofill.lookup(
  {
    callback:function(o){
      console.log(o);
  }
},'wc2h8ad'); // post code of the Yahoo office :)