2 of 3 added 2339 characters in body

Autofill state and city when typing zipcode

I know this would be crazy to have feature!!! Is there a way where when the user enters the zip code do an automatch and fill the state and city ?

I was looking at http://daspecster.github.com/ziptastic/demo.html

This is exactly what I want but in a VF page!!!

Can somebody guide me how to use the javscript inside the VF page/provide any other alternatives to this approach ?

Thanks a lot!!


I was trying to use this : http://css-tricks.com/using-ziptastic/ forum and do the following :

for some reason the alert is not showing up!!!I tried to debug using chrome and found no errors too. I tried to use mouseover on #zip as well as keydown, both do not work. Why would the mouseover/keydown event not work

Am i missing something?

       <apex:page standardStylesheets="false" showheader="false" sidebar="false" docType="html-5.0" cache="true">
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"/>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"/>
    var j$ = jQuery.noConflict();
    j$(".fancy-form div > div").hide();
    $("#zip").mouseover(function() {
    alert('Entered mouse over block');

<form action="#" method="post" class="fancy-form">


            <input type="text" name="address-line-1" id="address-line-1"/>
            <label for="address-line-1">Street #1</label>
            <input type="text" name="address-line-2" id="address-line-2"/>
            <label for="address-line-2">Street #2</label>
          <div class="city-wrap">
            <input type="text" name="city" id="city"/>
            <label for="city">City</label>
           <div class="state-wrap">
            <input type="text" name="state" id="state"/>
            <label for="state">State</label>
           <div class="zip-wrap">
            <input type="text" pattern="[0-9]*" name="zip" id="zip"/>
            <label for="zip">Zip</label>
            <p class="zip-error">Not a real zip code.</p>

          <input type="submit" value="Submit"/>