{"id":15058500,"url":"https://github.com/sertxudeveloper/livewire-combobox","last_synced_at":"2025-04-10T05:12:01.154Z","repository":{"id":37902123,"uuid":"500926294","full_name":"sertxudeveloper/livewire-combobox","owner":"sertxudeveloper","description":"Add comboboxes to your Livewire forms","archived":false,"fork":false,"pushed_at":"2024-10-07T13:04:13.000Z","size":458,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T05:11:51.414Z","etag":null,"topics":["combobox","eloquent","hacktoberfest","laravel","livewire","livewire-component","selectbox","selector","sertxudeveloper"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sertxudeveloper.png","metadata":{"funding":{"github":["sertxudev"],"custom":["https://buymeacoffee.com/sertxudeveloper"]},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-07T16:46:49.000Z","updated_at":"2025-04-03T07:00:15.000Z","dependencies_parsed_at":"2023-01-21T12:33:47.376Z","dependency_job_id":"34f8916b-d56b-4b90-9f65-bcacdca44099","html_url":"https://github.com/sertxudeveloper/livewire-combobox","commit_stats":{"total_commits":23,"total_committers":2,"mean_commits":11.5,"dds":"0.13043478260869568","last_synced_commit":"d377027cd2724216ab980ff9ebd5bdade1c49be4"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sertxudeveloper%2Flivewire-combobox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sertxudeveloper%2Flivewire-combobox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sertxudeveloper%2Flivewire-combobox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sertxudeveloper%2Flivewire-combobox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sertxudeveloper","download_url":"https://codeload.github.com/sertxudeveloper/livewire-combobox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161276,"owners_count":21057555,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["combobox","eloquent","hacktoberfest","laravel","livewire","livewire-component","selectbox","selector","sertxudeveloper"],"created_at":"2024-09-24T22:24:21.542Z","updated_at":"2025-04-10T05:12:01.127Z","avatar_url":"https://github.com/sertxudeveloper.png","language":"PHP","funding_links":["https://github.com/sponsors/sertxudev","https://buymeacoffee.com/sertxudeveloper"],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\u003cimg src=\"/art/socialcard.png\" alt=\"Laravel Combobox by Sertxu Developer\"\u003e\u003c/p\u003e\n\n# Add combobox to your Livewire forms\n\n![](https://img.shields.io/github/v/release/sertxudeveloper/livewire-combobox) ![](https://github.com/sertxudeveloper/livewire-combobox/actions/workflows/run-tests.yml/badge.svg) ![](https://img.shields.io/github/license/sertxudeveloper/livewire-combobox) ![](https://img.shields.io/github/repo-size/sertxudeveloper/livewire-combobox) ![](https://img.shields.io/packagist/dt/sertxudeveloper/livewire-combobox) ![](https://img.shields.io/github/issues/sertxudeveloper/livewire-combobox) ![](https://img.shields.io/packagist/php-v/sertxudeveloper/livewire-combobox) [![Codecov Test coverage](https://img.shields.io/codecov/c/github/sertxudeveloper/livewire-combobox)](https://app.codecov.io/gh/sertxudeveloper/livewire-combobox)\n\n\nDo you have a large dataset, and you need to be able to display it in a dropdown?\n\nWhen a basic select input is not enough, you can use a combobox!\n\nA combobox works like a select input, but instead of a dropdown, it displays a list of options that can be filtered by\ntyping.\n\nYou will no longer need to download all the data at the startup, just get the data you're looking for.\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require sertxudeveloper/livewire-combobox\n```\n\n## Usage\n\nOnce you have installed the package, you can use it in your Livewire forms.\n\nFirst, you need to execute the following command in your terminal:\n\n```bash\nphp artisan combobox:make UsersCombobox -m User\n```\n\nThis will create a new component in the `app/Livewire` directory.\n\nThe new `UsersCombobox` component will look like this:\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse App\\Models\\User;\nuse SertxuDeveloper\\LivewireCombobox\\Components\\Combobox;\n\nclass UsersCombobox extends Combobox\n{\n\n    /** @var class-string\u003cModel\u003e $model */\n    public string $model = User::class;\n\n}\n```\n\nAs you can see, the `$model` property is set to the `User` model.\nThis means that the component will be able to query the database using this model.\n\nBy default, the component will display the `name` column of the model.\nYou can change this by setting the `labelColumn` property:\n\n```php\n/**\n * The column to be shown as the label.\n *\n * @var string\n */\npublic string $labelColumn = 'title'; // Default: 'name'\n```\n\nTo start using the component, you need to add it to your Livewire form.\n\n```blade\n\u003clivewire:users-combobox\u003e\n```\n\n```blade\n@livewire('users-combobox')\n```\n\nYou can also pass some parameters to the component:\n\n```blade\n\u003clivewire:users-combobox name=\"author\" label=\"Author\" placeholder=\"Select a user\"\u003e\n```\n\n\u003e [!WARNING]\n\u003e If you don't pass any parameters, the component will use the default values.\u003cbr\u003e\n\u003e It's recommended to pass the parameters to the component.\u003cbr\u003e\n\u003e You can also add the values overriding the default values in the class.\n\n## Events\n\nWhile interacting with the component, some events might be fired.\n\nThe name of the events depends on the component name, this allows you to have more than one combobox in your form.\n\n- `selected-\u003ccomponent-name\u003e`: When the user selects an option from the dropdown.\n- `cleared-\u003ccomponent-name\u003e`: When the user clears the selected option.\n\nThese events will be fired up, so the parent component can react to the user interaction.\n\n\u003e [!Note]\n\u003e The `selected` event contains the selected model as a parameter.\n\n## Adding filters\n\nYou can filter the results by adding filters to the component.\n\n```php\n/**\n * Apply filters to the query.\n *\n * @param Builder $query\n * @return void\n */\nprotected function filter(Builder $query): void {\n    $query-\u003ewhere('email', 'like', \"%@example.com\");\n}\n```\n\nThe `filter` method receives the query builder as a parameter, so you can add as many filters as you want.\n\nThe filters will be applied to the query before fetching the results, so you can use them to limit the options given to the user. \n\n## Testing\n\nThis package contains tests, you can run them using the following command:\n\n```bash\ncomposer test\n```\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/sertxudeveloper/.github/blob/main/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Sergio Peris](https://github.com/sertxudev)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n\u003cbr\u003e\u003cbr\u003e\n\u003cp align=\"center\"\u003eCopyright © 2022 Sertxu Developer\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsertxudeveloper%2Flivewire-combobox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsertxudeveloper%2Flivewire-combobox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsertxudeveloper%2Flivewire-combobox/lists"}