PHPackages joshhanley/livewire-autocomplete - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. joshhanley/livewire-autocomplete ActiveLibrary[Utility & Helpers](/categories/utility) joshhanley/livewire-autocomplete ================================ An autocomplete dropdown for Livewire v2.1.3(1y ago)104100.0k—3.4%16[1 PRs](https://github.com/joshhanley/livewire-autocomplete/pulls)1MITBladePHP ^8.1CI passing Since Jul 4Pushed 10mo ago4 watchersCompare [ Source](https://github.com/joshhanley/livewire-autocomplete)[ Packagist](https://packagist.org/packages/joshhanley/livewire-autocomplete)[ RSS](/packages/joshhanley-livewire-autocomplete/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (8)Versions (23)Used By (1) Livewire Autocomplete ===================== [](#livewire-autocomplete) An autocomplete select component designed for use with Livewire that allows you to search through results or add a new one. Requirements ------------ [](#requirements) - Laravel ^10.0.0 - Livewire ^3.0.0 - Alpine ^3.0.0 (included in Livewire V3) Upgrades -------- [](#upgrades) Version 1.x of this package supports Livewire V2. If you want to use this with Livewire V3, you will need to upgrade to version 2.x of this package. There shouldn't be any breaking changes that you have to deal with, as all the breaking changes are internal. **Note:** Livewire V3 no longer supports Eloquent Model binding out of the box. If you are using Eloquent Models in your autocomplete search results (as previously recommended by this package), you can enable `legacy_model_binding` in Livewire V3. **It's not recommended to use legacy model binding in Livewire V3**, so it should only be used to assist with upgrading and refactoring away from models. Installation ------------ [](#installation) To install the package run ``` composer require joshhanley/livewire-autocomplete ``` Once the composer install finishes, the next step is to configure Tailwind to look for the autocomplete components, so all the styles are generated correctly. In your `tailwind.config.js` file, add the path to the autocomplete view directory to the end of the `content` array: ``` /** @type {import('tailwindcss').Config} */ export default { content: [ ... './vendor/joshhanley/livewire-autocomplete/resources/views/**/*.blade.php', ], ... } ``` And that's it, we have everything we need. Usage ----- [](#usage) This autocomplete component is a blade component design to be used within a Livewire component. It won't work as a standalone component, without Livewire. Demo App -------- [](#demo-app) The source code for a demo of this Livewire Autocomplete component can be found here here Example API ----------- [](#example-api) ``` ``` Wire Bindings ------------- [](#wire-bindings) - `wire:model-id` this is the property on the Livewire component that should be populated with the selected ID - `wire:model-text` this is the property on the Livewire component that should be populated with the text value of the input field - `wire:model-results` this is the property on the Livewire component that contains the list of results. This can be an array or collection of values, array with keys, or eloquent models (note for eloquent models to work in Livewire V3, you need to use `legacy_model_binding` for this to work - **but it's not recommended**) - `wire:focus` this is the method on the Livewire component that should be called on focus to load results into the results property Events ------ [](#events) - `{$name}-add-new` event, this is the main event the component fires, it uses the `name` attribute used for the component to fire the event (The `allow-new` option ***needs*** to be set true). ### Add new event example [](#add-new-event-example) ``` ``` Options and Components ---------------------- [](#options-and-components) Options and components have defaults set in the config file, which can be published and overridden changing all autocomplete components. Then individual options and components can be passed into each instance of the component through the props, and an array merge happens inside of the autocomplete class to populate any overrides. ### Options [](#options) - **id** this is set to `id` by default but can be mapped to a different property on an array or model (e.g. `slug`) - **text** this is set to `text` by default but can be mapped to a different property on an array or model (e.g. `name`) - **auto-select** `true` by default. - If is true, there will always be a highlighted result and enter or tab will auto select that result. - **allow-new** `true` by default. - If `allow-new` is true, the first option will be `Add new client "Bob"`, which tab autoselects - If `allow-new` is false, the first option is a result, which tab autoselects - **load-once-on-focus** `true` by default. - If is true, and there is a `wire:focus` binding, then the action will only be called on the first focus of the input box. This essentially allows deferring of loading results until it is needed. - **inline** this is a quick styling toggle between displaying the dropdown box inline or as an overlay. - **inline-styles** the styles to use when displaying the dropdown inline. - **overlay-styles** the styles to use when displaying the dropdown as an overlay. - **result-focus-styles** the styles to use on a result row when it has focus. ### Components [](#components) Components can be published to your `resources/views/vendor/package/autocomplete/components` using ``` php artisan vendor:publish --provider="LivewireAutocomplete\LivewireAutocompleteServiceProvider" --tag="autocomplete-components" ``` - **outer-container** surrounds the whole autocomplete input and dropdown - **input** is the input element - **clear-button** is the clear button for clearing an existing selection - **dropdown** is the dropdown box - **loading** is the loading contents, shown when livewire is loading - **results-container** surrounds the prompt, results, and no results components - **prompt** is the prompt shown in the empty box, when it's open (when `wire:focus` not set and `results = null`) - **results-list** surrounds only the add new row and the result rows - **add-new-row** is the "add new" result prompt row (when `allow-new = true`) - **result-row** is the component to use for each of the result rows - **no-results** is when there are no results found (when `allow-new = false`) **Structure** Below is the structure of how all the components are laid out, so you know which components to customise (if desired) ``` ``` **Default Components** Config ------ [](#config) Config can be published using ``` php artisan vendor:publish --provider="LivewireAutocomplete\LivewireAutocompleteServiceProvider" --tag="autocomplete-config" ``` If you wish to use the global namespace `` instead of `` then you can set `'use_global_namespace' => true,` in your config. **Default Config** Styles ------ [](#styles) The default styles on this component use Tailwind, but they can be overridden by: - publishing the components and changing them; - publishing the config and setting custom component names to use in the config; or - manually passing in component names to each instance of the autocomplete component through the `components` prop Scripts ------- [](#scripts) Livewire Autocomplete scripts are automatically included whenever you have an `` component on the page. But the scripts don't load, if the autocomplete component isn't displayed on page render. To get around this, you can disable the inline scripts by setting the config `autocomplete.inline-scripts` to `false`. You can then either include the script in your `app.blade.php` layout file at the end of the body tag, after Livewire's scripts. ``` ``` Or you can include the autocomplete scripts in your `app.js` bundle. ``` require('../../vendor/joshhanley/livewire-autocomplete/resources/js/autocomplete.js') ``` Contributing ------------ [](#contributing) ### Setup tests [](#setup-tests) If you want to run the tests for this package locally, you need to ensure that Testbench Dusk has the latest Chrome driver. ``` vendor/bin/dusk-updater detect --auto-update ``` You will also need to ensure the `database/database.sqlite` file exists. ``` touch database/database.sqlite ``` ### Run tests [](#run-tests) Now you can execute the tests locally using PHPUnit. ``` vendor/bin/phpunit ``` If you'd prefer to run tests in a headless browser, prefix the PHPUnit call with `CI=true`. ``` CI=true vendor/bin/phpunit ``` ### Health Score 52 — FairBetter than 96% of packages Maintenance50 Moderate activity, may be stable Popularity49 Moderate usage in the ecosystem Community23 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 94.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~78 days Recently: every ~131 days Total 18 Last Release 445d ago Major Versions v0.1.9 → v1.0.02023-02-15 v1.0.0 → v2.0.02023-09-14 v1.1.0 → v2.1.12024-05-14 PHP version history (3 changes)v0.1.0PHP ^7.4 v0.1.2PHP ^7.4|^8.0 v2.0.0PHP ^8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/e4ad7053094ebecf63993d76e363d37d39ad322351abb57bdf1727f39222ea68?d=identicon)[joshhanley](/maintainers/joshhanley) --- Top Contributors [![joshhanley](https://avatars.githubusercontent.com/u/882837?v=4)](https://github.com/joshhanley "joshhanley (198 commits)")[![bjora857](https://avatars.githubusercontent.com/u/237053?v=4)](https://github.com/bjora857 "bjora857 (3 commits)")[![dircm](https://avatars.githubusercontent.com/u/18188561?v=4)](https://github.com/dircm "dircm (3 commits)")[![shulard](https://avatars.githubusercontent.com/u/482993?v=4)](https://github.com/shulard "shulard (2 commits)")[![howdu](https://avatars.githubusercontent.com/u/533658?v=4)](https://github.com/howdu "howdu (1 commits)")[![Edgarborras94](https://avatars.githubusercontent.com/u/6952403?v=4)](https://github.com/Edgarborras94 "Edgarborras94 (1 commits)")[![mferrara](https://avatars.githubusercontent.com/u/795065?v=4)](https://github.com/mferrara "mferrara (1 commits)")[![ChrisThompsonTLDR](https://avatars.githubusercontent.com/u/348801?v=4)](https://github.com/ChrisThompsonTLDR "ChrisThompsonTLDR (1 commits)") ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/joshhanley-livewire-autocomplete/health.svg) ``` [![Health](https://phpackages.com/badges/joshhanley-livewire-autocomplete/health.svg)](https://phpackages.com/packages/joshhanley-livewire-autocomplete) ``` ### Alternatives [livewire/volt An elegantly crafted functional API for Laravel Livewire. 4205.3M84](/packages/livewire-volt)[ramonrietdijk/livewire-tables Dynamic tables for models with Laravel Livewire 21147.4k](/packages/ramonrietdijk-livewire-tables)[namu/wirechat A Laravel Livewire messaging app for teams with private chats and group conversations. 54324.5k](/packages/namu-wirechat)[marcorieser/statamic-livewire A Laravel Livewire integration for Statamic. 2381.5k10](/packages/marcorieser-statamic-livewire)[aerni/livewire-forms A Statamic forms framework powered by Laravel Livewire 2912.8k](/packages/aerni-livewire-forms)[team-nifty-gmbh/tall-datatables A package to create datatables using alpinejs, tailwind, livewire and laravel 1217.2k1](/packages/team-nifty-gmbh-tall-datatables) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)