{"id":16749632,"url":"https://github.com/alexpechkarev/alpinejs-multiselect","last_synced_at":"2025-04-09T20:12:14.221Z","repository":{"id":139181413,"uuid":"482893083","full_name":"alexpechkarev/alpinejs-multiselect","owner":"alexpechkarev","description":"Alpine.js multi select component","archived":false,"fork":false,"pushed_at":"2024-10-17T15:29:55.000Z","size":424,"stargazers_count":76,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-09T20:12:10.545Z","etag":null,"topics":["alpine-components","multi-select","select-search"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/alexpechkarev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-04-18T15:15:57.000Z","updated_at":"2025-04-02T09:21:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"501da8fe-70e0-4806-8696-5a15abcd8921","html_url":"https://github.com/alexpechkarev/alpinejs-multiselect","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"f74e543d9331fa395836a40b69abb35ee129bf8e"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexpechkarev%2Falpinejs-multiselect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexpechkarev%2Falpinejs-multiselect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexpechkarev%2Falpinejs-multiselect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexpechkarev%2Falpinejs-multiselect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexpechkarev","download_url":"https://codeload.github.com/alexpechkarev/alpinejs-multiselect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"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":["alpine-components","multi-select","select-search"],"created_at":"2024-10-13T02:25:26.946Z","updated_at":"2025-04-09T20:12:14.196Z","avatar_url":"https://github.com/alexpechkarev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# alpinejs-multiselect\nAlpine.js MultiSelect component\n\n## Features\n- Configurable pre-selected option\n- Fast search\n- Configurable searching values\n- Custom template\n\n## Dependency\n- [Apline.js](https://alpinejs.dev/essentials/installation)\n\n### [Demo](https://alexpechkarev.github.io/alpinejs-multiselect/)\n\n\n![Alpine.js MultiSelect](alpinejs-multiselect.gif)\n\n## Installation\n\nInstall [Alpine.js](https://alpinejs.dev/essentials/installation).\n\nThe example uses [Alpine's Focus plugin](https://alpinejs.dev/plugins/focus), this is optional.\n\nSpecify your select element, `data-search` attribute value used to match against the search string, ignoring upper/lower case differences.\n\n```html\n\u003cselect style=\"display:none;\" id=\"multSelect\"\u003e\n    \u003coption value=\"te_1\" data-search=\"Arsenal\"\u003eArsenal\u003c/option\u003e\n    \u003coption value=\"te_2\" data-search=\"Tottenham Hotspur Spurs\"\u003eSpurs\u003c/option\u003e\n    \u003coption value=\"te_3\" data-search=\"Manchester City\"\u003eMan City\u003c/option\u003e\n    ...\n\u003c/select\u003e\n```\n\nInitiate the Apline.js component, pre-selected options can be defined by initializing `selected` property with an array of values. `elementId` references the select element `id` defined above.\n\n```html\n \u003cdiv class=\"w-full\" x-data=\"alpineMuliSelect({selected:['te_1', 'te_2'], elementId:'multSelect'})\"\u003e\n ```\n\nAdd the Alpine component code into your application.\n\n ```javascript\n document.addEventListener(\"alpine:init\", () =\u003e {\n    Alpine.data(\"alpineMuliSelect\", (obj) =\u003e ({\n        elementId: obj.elementId,\n        options: [],\n        selected: obj.selected,\n        selectedElms: [],\n        show: false,\n        search: '',\n        open() {\n            this.show = true\n        },\n        close() {\n            this.show = false\n        },\n        toggle() {\n            this.show = !this.show\n        },\n        isOpen() {\n            return this.show === true\n        },\n        \n        // Initializing component \n        init() {\n            const options = document.getElementById(this.elementId).options;\n            for (let i = 0; i \u003c options.length; i++) {\n\n                this.options.push({\n                    value:  options[i].value,\n                    text:   options[i].innerText,\n                    search: options[i].dataset.search,\n                    selected: Object.values(this.selected).includes(options[i].value)\n                });\n\n                if (this.options[i].selected) {\n                    this.selectedElms.push(this.options[i])\n                }\n            }\n\n            // searching for the given value\n            this.$watch(\"search\", (e =\u003e {\n                this.options = []\n                const options = document.getElementById(this.elementId).options;\n                Object.values(options).filter((el) =\u003e {\n                    var reg = new RegExp(this.search, 'gi');\n                    return el.dataset.search.match(reg)\n                }).forEach((el) =\u003e {\n                    let newel = {\n                        value: el.value,\n                        text: el.innerText,\n                        search: el.dataset.search,\n                        selected: Object.values(this.selected).includes(el.value)\n                    }\n                    this.options.push(newel);\n                })\n            }));\n        },\n        // clear search field\n        clear() {\n            this.search = ''\n        },\n        // deselect selected options\n        deselect() {\n            setTimeout(() =\u003e {\n                this.selected = []\n                this.selectedElms = []\n                Object.keys(this.options).forEach((key) =\u003e {\n                    this.options[key].selected = false;\n                })\n            }, 100)\n        },\n        // select given option\n        select(index, event) {\n            if (!this.options[index].selected) {\n                this.options[index].selected = true;\n                this.options[index].element = event.target;\n                this.selected.push(this.options[index].value);\n                this.selectedElms.push(this.options[index]);\n\n            } else {\n                this.selected.splice(this.selected.lastIndexOf(index), 1);\n                this.options[index].selected = false\n                Object.keys(this.selectedElms).forEach((key) =\u003e {\n                    if (this.selectedElms[key].value == this.options[index].value) {\n                        setTimeout(() =\u003e {\n                            this.selectedElms.splice(key, 1)\n                        }, 100)\n                    }\n                })\n            }\n        },\n        // remove from selected option\n        remove(index, option) {\n            this.selectedElms.splice(index, 1);\n            Object.keys(this.selected).forEach((skey) =\u003e {\n                if (this.selected[skey] == option.value) {\n                    this.selected.splice(skey, 1);\n                }\n            });            \n            Object.keys(this.options).forEach((key) =\u003e {\n                if (this.options[key].value == option.value) {\n                    this.options[key].selected = false;\n                }\n            });\n        },\n        // filter out selected elements\n        selectedElements() {\n            return this.options.filter(op =\u003e op.selected === true)\n        },\n        // get selected values\n        selectedValues() {\n            return this.options.filter(op =\u003e op.selected === true).map(el =\u003e el.value)\n        }\n    }));\n});\n ```\n\n## Support\n-------\n[Please open an issue on GitHub](https://github.com/alexpechkarev/alpinejs-multiselect/issues)\n\n\n## Licence\n-------\nReleased under the MIT Licence. See the bundled\n[LICENCE](https://github.com/alexpechkarev/alpinejs-multiselect/blob/main/LICENSE)\nfile for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexpechkarev%2Falpinejs-multiselect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexpechkarev%2Falpinejs-multiselect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexpechkarev%2Falpinejs-multiselect/lists"}