jQuery U.S. States Autocomplete

jQuery U.S. States Autocomplete

Yes, I looked too; but it’s not out there. Here is a quick plugin I wrote utilizing the popular jQuery Autocomplete function found

Add it to your form element by using:

<input type="text" id="state_search"  />
<input type="hidden" name="state" />
...
<script type="text/javascript">
$('#state_search').states();
</script>

Here is the list and the jQuery function:

var state_autocomplete = [
{full:"Alabama",abbr:"AL"},
{full:"Alaska",abbr:"AK"},
{full:"Arizona",abbr:"AZ"},
{full:"Arkansas",abbr:"AR"},
{full:"California",abbr:"CA"},
{full:"Colorado",abbr:"CO"},
{full:"Connecticut",abbr:"CT"},
{full:"Delaware",abbr:"DE"},
{full:"District of Columbia",abbr:"DC"},
{full:"Florida",abbr:"FL"},
{full:"Georgia",abbr:"GA"},
{full:"Hawaii",abbr:"HI"},
{full:"Idaho",abbr:"ID"},
{full:"Illinois",abbr:"IL"},
{full:"Indiana",abbr:"IN"},
{full:"Iowa",abbr:"IA"},
{full:"Kansas",abbr:"KS"},
{full:"Kentucky",abbr:"KY"},
{full:"Louisiana",abbr:"LA"},
{full:"Maine",abbr:"ME"},
{full:"Maryland",abbr:"MD"},
{full:"Massachusetts",abbr:"MA"},
{full:"Michigan",abbr:"MI"},
{full:"Minnesota",abbr:"MN"},
{full:"Mississippi",abbr:"MS"},
{full:"Missouri",abbr:"MO"},
{full:"Montana",abbr:"MT"},
{full:"Nebraska",abbr:"NE"},
{full:"Nevada",abbr:"NV"},
{full:"New Hampshire",abbr:"NH"},
{full:"New Jersey",abbr:"NJ"},
{full:"New Mexico",abbr:"NM"},
{full:"New York",abbr:"NY"},
{full:"North Carolina",abbr:"NC"},
{full:"North Dakota",abbr:"ND"},
{full:"Ohio",abbr:"OH"},
{full:"Oklahoma",abbr:"OK"},
{full:"Oregon",abbr:"OR"},
{full:"Pennsylvania",abbr:"PA"},
{full:"Rhode island",abbr:"RI"},
{full:"South Carolina",abbr:"SC"},
{full:"South Dakota",abbr:"SD"},
{full:"Tennessee",abbr:"TN"},
{full:"Texas",abbr:"TX"},
{full:"Utah",abbr:"UT"},
{full:"Vermont",abbr:"VT"},
{full:"Virginia",abbr:"VA"},
{full:"Washington",abbr:"WA"},
{full:"West Virginia",abbr:"WV"},
{full:"Wisconsin",abbr:"WI"},
{full:"Wyoming",abbr:"WY"}
];

$.fn.states = function(){
    this.autocomplete(state_autocomplete,{
        mustMatch:true,
        formatItem: function(row) {
            return row.full;
        },
        formatResult: function(row) {
            return row.abbr;
        }
    }).result(function(event, data){
        this.value = data.full;
        $(this).next(":input[type=hidden]").attr('value', data.abbr);
    });
}

About the Author

Rob McVey

I am a software developer/IT professional helping businesses save money through informed purchase consulting; website development and marketing; and process automation.