A lightweight, framework-free JavaScript snippet that watches a ZIP field and auto-populates City and State from your API. Bind it with data attributes, point it at any endpoint, and it logs each lookup to the console for easy debugging. With no endpoint configured it returns a sample response so it runs as a live demo out of the box.
- Data-attribute binding: [data-zip], [data-city], [data-state]
- Scoped per so multiple forms work on one page
- Configurable API endpoint with {zip} substitution
- Return toggles: returnCity / returnState (config, data-attr, or runtime)
- Mock fallback response when no endpoint is set
- Console logging of raw JSON on every lookup
- Validation: digit count, HTTP failures, ok:false, empty data, missing fields
- Clears outputs automatically on any error
- x Data-attribute auto-binding
- x Config flags for returned fields
- x Console logging + error checking
- o Optional ZIP+4 support
- o Built-in caching of repeated lookups
- o Bundle a tiny default endpoint example
How do I add it to a page?
Add inputs with data-zip, data-city and data-state, set window.ZIP_LOOKUP_CONFIG with your endpoint, then include zip-lookup.js. City/State fill in as the ZIP is entered.
What shape does my API need to return?
The parser reads data[0].City / data[0].State (with lowercase fallbacks). Match that casing on your real endpoint, or adjust the parser.
Can I turn off returning the State?
Yes - set returnState:false in the config, add data-return-state="false" on the script tag, or call ZipLookup.setReturn({state:false}) at runtime.
It runs without my API - why?
With no endpoint configured it returns a built-in sample response so you can demo it; set the endpoint to go live.
- 1.0.0 - Initial release: data-attribute binding, configurable endpoint, return toggles, console logging and full error checking