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!!
**EDIT :**

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"/>
        <script>
        var j$ = jQuery.noConflict();
        j$(document).ready(function(){ 
        j$(".fancy-form div > div").hide();
        });
        $("#zip").mouseover(function() {
        alert('Entered mouse over block');
        });
        
        </script>
    <form action="#" method="post" class="fancy-form">
    
    
          <fieldset>
            <legend>Address</legend>
        
            <div>
              <div>
                <input type="text" name="address-line-1" id="address-line-1"/>
                <label for="address-line-1">Street #1</label>
              </div>
            </div>
            <div>
              <div>
                <input type="text" name="address-line-2" id="address-line-2"/>
                <label for="address-line-2">Street #2</label>
              </div>
            </div>
            <div>
              <div class="city-wrap">
                <input type="text" name="city" id="city"/>
                <label for="city">City</label>
              </div>
               <div class="state-wrap">
                <input type="text" name="state" id="state"/>
                <label for="state">State</label>
              </div>
               <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>
              </div>
            </div>
        
            <div>
              <input type="submit" value="Submit"/>
            </div>
        
          </fieldset>