{"id":15283892,"url":"https://github.com/jackbayliss/livewire-select2","last_synced_at":"2026-01-26T01:02:50.162Z","repository":{"id":232294113,"uuid":"783964524","full_name":"jackbayliss/livewire-select2","owner":"jackbayliss","description":"A livewire select2 component package to help with using select2 - it does the heavy lifting.","archived":false,"fork":false,"pushed_at":"2025-07-28T21:33:02.000Z","size":105,"stargazers_count":12,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-28T23:25:33.279Z","etag":null,"topics":["component","livewire","select2"],"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/jackbayliss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"JackBayliss"}},"created_at":"2024-04-08T23:25:32.000Z","updated_at":"2025-07-28T21:32:59.000Z","dependencies_parsed_at":"2024-05-03T22:34:09.715Z","dependency_job_id":"64cbed9e-4d00-4e6a-a300-a19eae5971f8","html_url":"https://github.com/jackbayliss/livewire-select2","commit_stats":null,"previous_names":["jackbayliss/livewire-select2"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/jackbayliss/livewire-select2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackbayliss%2Flivewire-select2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackbayliss%2Flivewire-select2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackbayliss%2Flivewire-select2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackbayliss%2Flivewire-select2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jackbayliss","download_url":"https://codeload.github.com/jackbayliss/livewire-select2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackbayliss%2Flivewire-select2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28763093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T00:37:26.264Z","status":"ssl_error","status_checked_at":"2026-01-26T00:37:25.959Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["component","livewire","select2"],"created_at":"2024-09-30T14:48:07.556Z","updated_at":"2026-01-26T01:02:50.156Z","avatar_url":"https://github.com/jackbayliss.png","language":"PHP","funding_links":["https://github.com/sponsors/JackBayliss"],"categories":[],"sub_categories":[],"readme":"# Simple to use Livewire component for Select2\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/jackbayliss/livewire-select2.svg?style=flat-square)](https://packagist.org/packages/jackbayliss/livewire-select2)\n[![GitHub Tests Action Status](https://img.shields.io/github/actions/workflow/status/jackbayliss/livewire-select2/run-tests.yml?branch=main\u0026label=tests\u0026style=flat-square)](https://github.com/jackbayliss/livewire-select2/actions?query=workflow%3Arun-tests+branch%3Amain)\n[![GitHub Code Style Action Status](https://img.shields.io/github/actions/workflow/status/jackbayliss/livewire-select2/fix-php-code-style-issues.yml?branch=main\u0026label=code%20style\u0026style=flat-square)](https://github.com/jackbayliss/livewire-select2/actions?query=workflow%3A\"Fix+PHP+code+style+issues\"+branch%3Amain)\n[![Total Downloads](https://img.shields.io/packagist/dt/jackbayliss/livewire-select2.svg?style=flat-square)](https://packagist.org/packages/jackbayliss/livewire-select2)\n\nEasy to use Livewire component specifically for Select2. \n\nSupports: \n- Laravel 10\n- Laravel 11\n- Laravel 12\n\n## Installation\n\nYou can install the package via composer:\nThis currently works on Livewire V3 and V4\n\n```bash\ncomposer require jackbayliss/livewire-select2\n```\n## Initial Setup\nFirst of all, ensure you install jQuery, and select2- for example, the below. You can also install these via npm and import it into your app.js. \nMain thing is ensuring the scripts are included anywhere you want select2 to work.\n```html\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js\"\u003e\u003c/script\u003e\n```\n## Usage\nThe package is quite straight forward, and can be used directly in a **LIVEWIRE** component, see below the basic usage\n```html\n\u003clivewire:select-2 :options=\"$this-\u003evehicles\" onchange=\"triggerMyFunction\" name=\"vehicles\" model=\"Vauxhall\" multiple/\u003e\n```\n\n## Component parameters\n#### options (required) - array\nThe select2 component expects an array of options, this can be for example - you must pass this into the options param as per the above.\n```php\npublic $vehicles = ['Ford','Vauxhall','Seat'];\n```\n\n#### onchange (required) - string\nThe select2 component expects a string of the listener function to call. For example, `triggerMyFunction`- you can see how to do this below.\nThe onchange function, expects one param. The param returned from this component is an array of data - which includes the following:\n##### Name - The name param you passed in, this can be used in your custom function if required - this is null if not supplied.\n##### Data - This is the values returned from the select2 change, if you have not set the multiple param, this is a string- otherwise its an array. Please see https://github.com/jackbayliss/livewire-select2?tab=readme-ov-file#base-component if theres any confusion.\n\u003e [!IMPORTANT]  \n\u003e Ensure your function includes one parameter, for example `triggerMyFunction($select2)`\n\n#### name (not required) - string\nYou can pass this to your component if you need specific logic based on the name.\n#### model (not required) - string\nYou can pass an option value in as model, this then auto selects the option- useful in a case where a selection has already been made.\n```html\n\u003clivewire:select-2 :options=\"$this-\u003evehicles\" onchange=\"callVehicles\" name=\"vehicles\" model=\"Vauxhall\"/\u003e\n\n```\n#### How to add a custom class \nThis can apply a custom CSS class to the Livewire Select2 component, see below for an example\n\n```css\n\u003cstyle\u003e\n        .example{\n            width: 50% !important;\n        }\n\u003c/style\u003e\n```\n\n```html\n\u003clivewire:select-2 :options=\"$this-\u003evehicles\" onchange=\"triggerMyFunction\" name=\"vehicles\" model=\"Vauxhall\" multiple :class=\"'example'\"/\u003e\n```\n\n\n\n#### multiple (not required) - blank param    \n\u003e [!TIP]\n\u003e If this is used, the data will be returned as an array, rather than a string.\n\nThis allows you to select multiple options, as per select2 usually does and should be used like the following:\n```html\n\u003clivewire:select-2 :options=\"$this-\u003evehicles\" onchange=\"callVehicles\" name=\"vehicles\" multiple/\u003e\n```\n\n## Creating a Listener\n\u003e [!TIP]\n\u003e A listener is required for the onchange param, in order to create a listener, you should do the below. This means, whenever the select2 component is changed - ie an option clicked, it will call the function you defined, and you can do as you wish with the logic.\n\n```html\n\u003clivewire:select-2 :options=\"$this-\u003evehicles\" onchange=\"triggerMyFunction\" name=\"vehicles\"/\u003e\n```\n\n\n```php\n\n    protected $listeners = ['triggerMyFunction'];\n\n    public function triggerMyFunction($data){\n        dd($data['name'],$data['data']);\n    }\n\n```\n\u003e [!IMPORTANT]  \n\u003e Whatever string you pass to the onchange param, ensure you create a listener and function like the above. **Your function must accept one parameter, this is the array of data returned which includes name and data, name being the name you set on the component (if you did set one) and the data ie the value selected.**\n\n\n## Example / How it works in practice\n####  Base component\nI have an initial component, which I am calling as \u003clivewire:test\u003e in my blade. The component is below:\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Livewire\\Component;\nclass Test extends Component\n{\n\n    public string $selectedVehicle = 'N/A';\n    public array $vehicles = ['Ford','Vauxhall','Seat'];\n\n    protected $listeners = ['callVehicles'];\n    \n    // DO YOUR OWN LOGIC...\n    public function callVehicles($output){\n            if(in_array($output['data'],$this-\u003evehicles)){\n                $this-\u003eselectedVehicle = $output['data'];\n            }\n    }\n    public function render()\n    {\n        return view('livewire.test');\n    }\n}\n\n```\n####  The view, is basic and looks like the below - main thing to take away is how the component is used:\n```html\n\u003cdiv\u003e\n\u003clivewire:select-2 :options=\"$this-\u003evehicles\" onchange=\"callVehicles\" name=\"vehicles\"/\u003e\n{{ $this-\u003eselectedVehicle }}\n\u003c/div\u003e\n\n\n\n```\nYou then get the below...\n\n![test-component](https://github.com/jackbayliss/livewire-select2/assets/13621738/1fb1dfaf-cc1d-44b5-82a5-4cff50e7b679)\n\n## Stuck?\nI have an example project setup below.. you can simply download it and composer install. \n\n\nhttps://github.com/jackbayliss/livewire-select-2-example-proj\n\n## Testing WIP\n\n```bash\ncomposer test\n```\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## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Jack Bayliss](https://github.com/jackbayliss)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackbayliss%2Flivewire-select2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjackbayliss%2Flivewire-select2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackbayliss%2Flivewire-select2/lists"}