{"_id":"@binary-cats/alpinejs-google-autocomplete","_rev":"3-73a4036feeee0c02f7020258bdc55d4f","name":"@binary-cats/alpinejs-google-autocomplete","dist-tags":{"latest":"1.2.1"},"versions":{"1.0.0":{"name":"@binary-cats/alpinejs-google-autocomplete","version":"1.0.0","keywords":["alpinejs","directive","autocomplete","google-maps","places","google-autocomplete"],"author":{"name":"Cyrill Kalita"},"license":"MIT","_id":"@binary-cats/alpinejs-google-autocomplete@1.0.0","maintainers":[{"name":"cyrill.kalita","email":"cyrill.kalita@gmail.com"}],"homepage":"https://github.com/binary-cats/alpinejs-google-autocomplete#readme","bugs":{"url":"https://github.com/binary-cats/alpinejs-google-autocomplete/issues"},"dist":{"shasum":"3a4c5f0fe2ac6edb0745497a6a3bba349f717140","tarball":"https://registry.npmjs.org/@binary-cats/alpinejs-google-autocomplete/-/alpinejs-google-autocomplete-1.0.0.tgz","fileCount":11,"integrity":"sha512-W2HmN2EL9EWP0HYEFtK+uHME6xwFXmlCGrnv9IzVLv6nfW+Fxvzr5PnAzAxDUUnT8Y5a+b5GhVmANZCg4tgdTg==","signatures":[{"sig":"MEYCIQCopVcJ/Q/jx0ym8lkT70ui4G+Lzkxs4ja+vpp26ZwkyQIhANdxQfD0HnoiBH5I7KH621Vg1iNw01lvwc82M4xwLnd4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31889},"main":"index.js","type":"module","module":"./index.js","engines":{"node":">=16"},"exports":{".":"./index.js"},"gitHead":"98374d960187a70718f29b73673fe45fb45f6418","scripts":{"test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"cyrill.kalita","email":"cyrill.kalita@gmail.com"},"repository":{"url":"git+https://github.com/binary-cats/alpinejs-google-autocomplete.git","type":"git"},"_npmVersion":"10.9.2","description":"An Alpine.js directive for Google Maps Places Autocomplete with dialog/modal support and structured address output.","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"vitest":"^2.1.8","alpinejs":"^3.14.0","happy-dom":"^15.11.7","@vitest/coverage-v8":"^2.1.8"},"peerDependencies":{"alpinejs":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/alpinejs-google-autocomplete_1.0.0_1762636435222_0.06292252277075594","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@binary-cats/alpinejs-google-autocomplete","version":"1.1.0","keywords":["alpinejs","directive","autocomplete","google-maps","places","google-autocomplete"],"author":{"name":"Cyrill Kalita"},"license":"MIT","_id":"@binary-cats/alpinejs-google-autocomplete@1.1.0","maintainers":[{"name":"cyrill.kalita","email":"cyrill.kalita@gmail.com"}],"homepage":"https://github.com/binary-cats/alpinejs-google-autocomplete#readme","bugs":{"url":"https://github.com/binary-cats/alpinejs-google-autocomplete/issues"},"dist":{"shasum":"bc1b9e0852aa2739c6fcce1092f16756702795cf","tarball":"https://registry.npmjs.org/@binary-cats/alpinejs-google-autocomplete/-/alpinejs-google-autocomplete-1.1.0.tgz","fileCount":11,"integrity":"sha512-DyhA0lmE7X4e/pLDNNONxR+BpeOg/pxra0glhd3inIW8wo6cZxqc5s0i3McqhmGRLG9e+51QlK8x5IidaThNWA==","signatures":[{"sig":"MEUCIQDWjGSmHfr9IBLy0mPZ1tKwwBKjV+KFS3II4faf4L9HFwIgF0dfoAAp80lVxFCXleFK9ue147ECobRwU4vd4yoVCyU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32405},"main":"index.js","type":"module","module":"./index.js","engines":{"node":">=16"},"exports":{".":"./index.js"},"gitHead":"a412096752b1c56feb013eeeabacf4605e98266e","scripts":{"test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"cyrill.kalita","email":"cyrill.kalita@gmail.com"},"repository":{"url":"git+https://github.com/binary-cats/alpinejs-google-autocomplete.git","type":"git"},"_npmVersion":"10.9.2","description":"An Alpine.js directive for Google Maps Places Autocomplete with dialog/modal support and structured address output.","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"vitest":"^2.1.8","alpinejs":"^3.14.0","happy-dom":"^15.11.7","@vitest/coverage-v8":"^2.1.8"},"peerDependencies":{"alpinejs":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/alpinejs-google-autocomplete_1.1.0_1762905864970_0.11504411241865031","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@binary-cats/alpinejs-google-autocomplete","version":"1.2.1","description":"An Alpine.js directive for Google Maps Places Autocomplete with dialog/modal support and structured address output.","main":"index.js","module":"./index.js","type":"module","exports":{".":"./index.js"},"keywords":["alpinejs","directive","autocomplete","google-maps","places","google-autocomplete"],"author":{"name":"Cyrill Kalita"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/binary-cats/alpinejs-google-autocomplete.git"},"bugs":{"url":"https://github.com/binary-cats/alpinejs-google-autocomplete/issues"},"homepage":"https://github.com/binary-cats/alpinejs-google-autocomplete#readme","peerDependencies":{"alpinejs":"^3.0.0"},"engines":{"node":">=16"},"scripts":{"test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage"},"devDependencies":{"@vitest/coverage-v8":"^2.1.8","alpinejs":"^3.14.0","happy-dom":"^15.11.7","vitest":"^2.1.8"},"_id":"@binary-cats/alpinejs-google-autocomplete@1.2.1","gitHead":"22f42af5e71e3cf8baf155afc07085510215ffee","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-NTzpSDVpZKlZh448V3x+EpJRZx4+GxYPa/Qqa8to6UAO/DCpxy7eNCEFrMtwl+AAVtaa/bTb/ADJP3GxjEnSPA==","shasum":"6b00d0165b743afe9c4de7e5bf9c42077cd12793","tarball":"https://registry.npmjs.org/@binary-cats/alpinejs-google-autocomplete/-/alpinejs-google-autocomplete-1.2.1.tgz","fileCount":11,"unpackedSize":37349,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEOopeQsWfBRZCIwEnRY4JZs3gxY29H1dnlCdbmY4XD7AiEArU1H8Aq8mLXY6NYwzvVBquF9FVnyNHZrgsNgvmc1i6c="}]},"_npmUser":{"name":"cyrill.kalita","email":"cyrill.kalita@gmail.com"},"directories":{},"maintainers":[{"name":"cyrill.kalita","email":"cyrill.kalita@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/alpinejs-google-autocomplete_1.2.1_1779733008169_0.7509910628329066"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-08T21:13:55.139Z","modified":"2026-05-25T18:16:48.505Z","1.0.0":"2025-11-08T21:13:55.407Z","1.1.0":"2025-11-12T00:04:25.140Z","1.2.1":"2026-05-25T18:16:48.377Z"},"bugs":{"url":"https://github.com/binary-cats/alpinejs-google-autocomplete/issues"},"author":{"name":"Cyrill Kalita"},"license":"MIT","homepage":"https://github.com/binary-cats/alpinejs-google-autocomplete#readme","keywords":["alpinejs","directive","autocomplete","google-maps","places","google-autocomplete"],"repository":{"type":"git","url":"git+https://github.com/binary-cats/alpinejs-google-autocomplete.git"},"description":"An Alpine.js directive for Google Maps Places Autocomplete with dialog/modal support and structured address output.","maintainers":[{"name":"cyrill.kalita","email":"cyrill.kalita@gmail.com"}],"readme":"# Alpine.js Google Autocomplete\n\nA lightweight and framework-safe Alpine.js directive for integrating Google Maps Places Autocomplete into your frontend, with:\n\n![](https://banners.beyondco.de/alpinejs-google-autocomplete.png?theme=light&packageManager=npm+install&packageName=%40binary-cats%2Falpinejs-google-autocomplete&pattern=architect&style=style_1&description=An+Alpine.js+directive+for+Google+Maps+Places+Autocomplete&md=1&showWatermark=1&fontSize=100px&images=terminal)\n\n## Features\n\n- ✅ Works with Alpine.js 3+\n- ✅ Google Places API address lookup\n- ✅ Minimal setup and configuration\n- ✅ Structured address output (line_1, city, state, zip, country, coordinates)\n- ✅ Full support for `<dialog>` elements and modals (prevents dropdown clipping)\n- ✅ Automatic cleanup of event listeners and observers\n- ✅ Handles async Google Maps API loading with timeout fallback\n\n\n**N.B.:** It relies on `google.maps.places.Autocomplete`\n \n> As of March 1st, 2025, google.maps.places.Autocomplete is not available to new customers. \n> Please use google.maps.places.PlaceAutocompleteElement instead. \n> At this time, google.maps.places.Autocomplete is not scheduled to be discontinued, \n> but google.maps.places.PlaceAutocompleteElement is recommended over google.maps.places.Autocomplete. \n> While google.maps.places.Autocomplete will continue to receive bug fixes for any major regressions, \n> existing bugs in google.maps.places.Autocomplete will not be addressed. \n> At least 12 months notice will be given before support is discontinued. \n> Please see [https://developers.google.com/maps/legacy](https://developers.google.com/maps/legacy) for additional details and \n> [https://developers.google.com/maps/documentation/javascript/places-migration-overview](https://developers.google.com/maps/documentation/javascript/places-migration-overview) for the migration guide\n\n---\n\nIf you are fine with it, let's go 🚀\n\n## Requirements\n\n✅ You have an API key that has been provided access to (1) Maps JavaScript API and (2) Places API  \n✅ alpinejs: ^3.0  \n\n## Installation\n\n```bash\nnpm install @binary-cats/alpinejs-google-autocomplete\n```\nInclude the Maps JS loader and fire `maps:init` once it’s ready:\n\n```html\n<script>googleMapsReady = () => {document.dispatchEvent(new Event('maps:init'))}</script>\n<script async src=\"//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=googleMapsReady\"></script>\n```\n\n## Usage\n\nIn your bundle, assuming `app.js`:\n\n```js\nimport Alpine from 'alpinejs'\nimport googleAddressLookup from '@binary-cats/alpinejs-google-autocomplete'\n\nAlpine.plugin(googleAddressLookup)\nAlpine.start()\n```\n\nFinally, in your HTML:\n\n```html\n<div x-data=\"{address:{}}\">\n    <input\n        x-address-lookup=\"address\"\n        type=\"text\"\n        autocomplete=\"off\"\n        placeholder=\"Search for an address...\"/>\n</div>\n```\n\n### Working with Dialogs/Modals\n\nThe directive automatically handles `<dialog>` elements to prevent the autocomplete dropdown from being clipped:\n\n```html\n<dialog x-data=\"{address:{}}\">\n    <input\n        x-address-lookup=\"address\"\n        type=\"text\"\n        autocomplete=\"off\"\n        placeholder=\"Search for an address...\"/>\n</dialog>\n```\n\nOnce a place is selected, it will populate the `address` object with:\n\n```js\n{\n    line_1: '123 Main St',\n    city: 'New York',\n    state: 'NY',\n    zip: '10001',\n    country: 'United States',\n    google_location_id: 'ChIJ...',\n    formatted_address: '123 Main St, New York, NY 10001',\n    lat: 40.7128,\n    lng: -74.0060\n}\n```\n\n### Address Object Properties\n\n- `line_1`: Street number and route (e.g., \"123 Main St\")\n- `city`: Locality name\n- `state`: State abbreviation (short_name)\n- `zip`: Postal code\n- `country`: Country name\n- `google_location_id`: Google Place ID\n- `formatted_address`: Full formatted address string\n- `lat`: Latitude coordinate\n- `lng`: Longitude coordinate\n\n### Testing\n\nRun the test suite:\n\n```bash\nnpm test\n```\n\nRun tests in watch mode:\n\n```bash\nnpm run test:watch\n```\n\nGenerate coverage report:\n\n```bash\nnpm run test:coverage\n```\n\nThe test suite uses [Vitest](https://vitest.dev/) with comprehensive coverage of all functionality.\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Postcardware\n\nYou're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.\n\n## Credits\n\n- [Cyrill N Kalita](https://github.com/cyrillkalita)\n- [All Contributors](../../contributors)\n\n## Browser Support\n\nThis package works in all modern browsers that support:\n- ES6 modules\n- Alpine.js 3.x\n- Google Maps JavaScript API\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","readmeFilename":"README.md"}