├── .github
    └── workflows
    │   └── codeql-analysis.yml
├── LICENSE
├── README.md
├── alpinejs-multiselect.gif
├── alpinejs-multiselect.js
└── docs
    ├── _config.yml
    ├── index.html
    └── index.md


/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
 1 | # For most projects, this workflow file will not need changing; you simply need
 2 | # to commit it to your repository.
 3 | #
 4 | # You may wish to alter this file to override the set of languages analyzed,
 5 | # or to provide custom queries or build logic.
 6 | #
 7 | # ******** NOTE ********
 8 | # We have attempted to detect the languages in your repository. Please check
 9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 | 
14 | on:
15 |   push:
16 |     branches: [ main ]
17 |   pull_request:
18 |     # The branches below must be a subset of the branches above
19 |     branches: [ main ]
20 |   schedule:
21 |     - cron: '16 10 * * 0'
22 | 
23 | jobs:
24 |   analyze:
25 |     name: Analyze
26 |     runs-on: ubuntu-latest
27 |     permissions:
28 |       actions: read
29 |       contents: read
30 |       security-events: write
31 | 
32 |     strategy:
33 |       fail-fast: false
34 |       matrix:
35 |         language: [ 'javascript' ]
36 |         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
37 |         # Learn more about CodeQL language support at https://git.io/codeql-language-support
38 | 
39 |     steps:
40 |     - name: Checkout repository
41 |       uses: actions/checkout@v3
42 | 
43 |     # Initializes the CodeQL tools for scanning.
44 |     - name: Initialize CodeQL
45 |       uses: github/codeql-action/init@v2
46 |       with:
47 |         languages: ${{ matrix.language }}
48 |         # If you wish to specify custom queries, you can do so here or in a config file.
49 |         # By default, queries listed here will override any specified in a config file.
50 |         # Prefix the list here with "+" to use these queries and those in the config file.
51 |         # queries: ./path/to/local/query, your-org/your-repo/queries@main
52 | 
53 |     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
54 |     # If this step fails, then you should remove it and run the build manually (see below)
55 |     - name: Autobuild
56 |       uses: github/codeql-action/autobuild@v2
57 | 
58 |     # ℹ️ Command-line programs to run using the OS shell.
59 |     # 📚 https://git.io/JvXDl
60 | 
61 |     # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
62 |     #    and modify them (or add more) to build your code if your project
63 |     #    uses a compiled language
64 | 
65 |     #- run: |
66 |     #   make bootstrap
67 |     #   make release
68 | 
69 |     - name: Perform CodeQL Analysis
70 |       uses: github/codeql-action/analyze@v2
71 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Alexander Pechkarev
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # alpinejs-multiselect
  2 | Alpine.js MultiSelect component
  3 | 
  4 | ## Features
  5 | - Configurable pre-selected option
  6 | - Fast search
  7 | - Configurable searching values
  8 | - Custom template
  9 | 
 10 | ## Dependency
 11 | - [Apline.js](https://alpinejs.dev/essentials/installation)
 12 | 
 13 | ### [Demo](https://alexpechkarev.github.io/alpinejs-multiselect/)
 14 | 
 15 | 
 16 | ![Alpine.js MultiSelect](alpinejs-multiselect.gif)
 17 | 
 18 | ## Installation
 19 | 
 20 | Install [Alpine.js](https://alpinejs.dev/essentials/installation).
 21 | 
 22 | The example uses [Alpine's Focus plugin](https://alpinejs.dev/plugins/focus), this is optional.
 23 | 
 24 | Specify your select element, `data-search` attribute value used to match against the search string, ignoring upper/lower case differences.
 25 | 
 26 | ```html
 27 | <select style="display:none;" id="multSelect">
 28 |     <option value="te_1" data-search="Arsenal">Arsenal</option>
 29 |     <option value="te_2" data-search="Tottenham Hotspur Spurs">Spurs</option>
 30 |     <option value="te_3" data-search="Manchester City">Man City</option>
 31 |     ...
 32 | </select>
 33 | ```
 34 | 
 35 | Initiate 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.
 36 | 
 37 | ```html
 38 |  <div class="w-full" x-data="alpineMuliSelect({selected:['te_1', 'te_2'], elementId:'multSelect'})">
 39 |  ```
 40 | 
 41 | Add the Alpine component code into your application.
 42 | 
 43 |  ```javascript
 44 |  document.addEventListener("alpine:init", () => {
 45 |     Alpine.data("alpineMuliSelect", (obj) => ({
 46 |         elementId: obj.elementId,
 47 |         options: [],
 48 |         selected: obj.selected,
 49 |         selectedElms: [],
 50 |         show: false,
 51 |         search: '',
 52 |         open() {
 53 |             this.show = true
 54 |         },
 55 |         close() {
 56 |             this.show = false
 57 |         },
 58 |         toggle() {
 59 |             this.show = !this.show
 60 |         },
 61 |         isOpen() {
 62 |             return this.show === true
 63 |         },
 64 |         
 65 |         // Initializing component 
 66 |         init() {
 67 |             const options = document.getElementById(this.elementId).options;
 68 |             for (let i = 0; i < options.length; i++) {
 69 | 
 70 |                 this.options.push({
 71 |                     value:  options[i].value,
 72 |                     text:   options[i].innerText,
 73 |                     search: options[i].dataset.search,
 74 |                     selected: Object.values(this.selected).includes(options[i].value)
 75 |                 });
 76 | 
 77 |                 if (this.options[i].selected) {
 78 |                     this.selectedElms.push(this.options[i])
 79 |                 }
 80 |             }
 81 | 
 82 |             // searching for the given value
 83 |             this.$watch("search", (e => {
 84 |                 this.options = []
 85 |                 const options = document.getElementById(this.elementId).options;
 86 |                 Object.values(options).filter((el) => {
 87 |                     var reg = new RegExp(this.search, 'gi');
 88 |                     return el.dataset.search.match(reg)
 89 |                 }).forEach((el) => {
 90 |                     let newel = {
 91 |                         value: el.value,
 92 |                         text: el.innerText,
 93 |                         search: el.dataset.search,
 94 |                         selected: Object.values(this.selected).includes(el.value)
 95 |                     }
 96 |                     this.options.push(newel);
 97 |                 })
 98 |             }));
 99 |         },
100 |         // clear search field
101 |         clear() {
102 |             this.search = ''
103 |         },
104 |         // deselect selected options
105 |         deselect() {
106 |             setTimeout(() => {
107 |                 this.selected = []
108 |                 this.selectedElms = []
109 |                 Object.keys(this.options).forEach((key) => {
110 |                     this.options[key].selected = false;
111 |                 })
112 |             }, 100)
113 |         },
114 |         // select given option
115 |         select(index, event) {
116 |             if (!this.options[index].selected) {
117 |                 this.options[index].selected = true;
118 |                 this.options[index].element = event.target;
119 |                 this.selected.push(this.options[index].value);
120 |                 this.selectedElms.push(this.options[index]);
121 | 
122 |             } else {
123 |                 this.selected.splice(this.selected.lastIndexOf(index), 1);
124 |                 this.options[index].selected = false
125 |                 Object.keys(this.selectedElms).forEach((key) => {
126 |                     if (this.selectedElms[key].value == this.options[index].value) {
127 |                         setTimeout(() => {
128 |                             this.selectedElms.splice(key, 1)
129 |                         }, 100)
130 |                     }
131 |                 })
132 |             }
133 |         },
134 |         // remove from selected option
135 |         remove(index, option) {
136 |             this.selectedElms.splice(index, 1);
137 |             Object.keys(this.selected).forEach((skey) => {
138 |                 if (this.selected[skey] == option.value) {
139 |                     this.selected.splice(skey, 1);
140 |                 }
141 |             });            
142 |             Object.keys(this.options).forEach((key) => {
143 |                 if (this.options[key].value == option.value) {
144 |                     this.options[key].selected = false;
145 |                 }
146 |             });
147 |         },
148 |         // filter out selected elements
149 |         selectedElements() {
150 |             return this.options.filter(op => op.selected === true)
151 |         },
152 |         // get selected values
153 |         selectedValues() {
154 |             return this.options.filter(op => op.selected === true).map(el => el.value)
155 |         }
156 |     }));
157 | });
158 |  ```
159 | 
160 | ## Support
161 | -------
162 | [Please open an issue on GitHub](https://github.com/alexpechkarev/alpinejs-multiselect/issues)
163 | 
164 | 
165 | ## Licence
166 | -------
167 | Released under the MIT Licence. See the bundled
168 | [LICENCE](https://github.com/alexpechkarev/alpinejs-multiselect/blob/main/LICENSE)
169 | file for details.
170 | 


--------------------------------------------------------------------------------
/alpinejs-multiselect.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexpechkarev/alpinejs-multiselect/f74e543d9331fa395836a40b69abb35ee129bf8e/alpinejs-multiselect.gif


--------------------------------------------------------------------------------
/alpinejs-multiselect.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener("alpine:init", () => {
  2 |     Alpine.data("alpineMuliSelect", (obj) => ({
  3 |         elementId: obj.elementId,
  4 |         options: [],
  5 |         selected: obj.selected,
  6 |         selectedElms: [],
  7 |         show: false,
  8 |         search: '',
  9 |         open() {
 10 |             this.show = true
 11 |         },
 12 |         close() {
 13 |             this.show = false
 14 |         },
 15 |         toggle() {
 16 |             this.show = !this.show
 17 |         },
 18 |         isOpen() {
 19 |             return this.show === true
 20 |         },
 21 | 
 22 |         // Initializing component 
 23 |         init() {
 24 |             const options = document.getElementById(this.elementId).options;
 25 |             for (let i = 0; i < options.length; i++) {
 26 | 
 27 |                 this.options.push({
 28 |                     value: options[i].value,
 29 |                     text: options[i].innerText,
 30 |                     search: options[i].dataset.search,
 31 |                     selected: Object.values(this.selected).includes(options[i].value)
 32 |                 });
 33 | 
 34 |                 if (this.options[i].selected) {
 35 |                     this.selectedElms.push(this.options[i])
 36 |                 }
 37 |             }
 38 | 
 39 |             // searching for the given value
 40 |             this.$watch("search", (e => {
 41 |                 this.options = []
 42 |                 const options = document.getElementById(this.elementId).options;
 43 |                 Object.values(options).filter((el) => {
 44 |                     var reg = new RegExp(this.search, 'gi');
 45 |                     return el.dataset.search.match(reg)
 46 |                 }).forEach((el) => {
 47 |                     let newel = {
 48 |                         value: el.value,
 49 |                         text: el.innerText,
 50 |                         search: el.dataset.search,
 51 |                         selected: Object.values(this.selected).includes(el.value)
 52 |                     }
 53 |                     this.options.push(newel);
 54 | 
 55 |                 })
 56 | 
 57 | 
 58 |             }));
 59 |         },
 60 |         // clear search field
 61 |         clear() {
 62 |             this.search = ''
 63 |         },
 64 |         // deselect selected options
 65 |         deselect() {
 66 |             setTimeout(() => {
 67 |                 this.selected = []
 68 |                 this.selectedElms = []
 69 |                 Object.keys(this.options).forEach((key) => {
 70 |                     this.options[key].selected = false;
 71 |                 })
 72 |             }, 100)
 73 |         },
 74 |         // select given option
 75 |         select(index, event) {
 76 |             if (!this.options[index].selected) {
 77 |                 this.options[index].selected = true;
 78 |                 this.options[index].element = event.target;
 79 |                 this.selected.push(this.options[index].value);
 80 |                 this.selectedElms.push(this.options[index]);
 81 | 
 82 |             } else {
 83 |                 this.selected.splice(this.selected.lastIndexOf(index), 1);
 84 |                 this.options[index].selected = false
 85 |                 Object.keys(this.selectedElms).forEach((key) => {
 86 |                     if (this.selectedElms[key].value == this.options[index].value) {
 87 |                         setTimeout(() => {
 88 |                             this.selectedElms.splice(key, 1)
 89 |                         }, 100)
 90 |                     }
 91 |                 })
 92 |             }
 93 |         },
 94 |         // remove from selected option
 95 |         remove(index, option) {
 96 |             this.selectedElms.splice(index, 1);
 97 |             Object.keys(this.selected).forEach((skey) => {
 98 |                 if (this.selected[skey] == option.value) {
 99 |                     this.selected.splice(skey, 1);
100 |                 }
101 |             });
102 |             Object.keys(this.options).forEach((key) => {
103 |                 if (this.options[key].value == option.value) {
104 |                     this.options[key].selected = false;
105 |                 }
106 |             });
107 |         },
108 |         // filter out selected elements
109 |         selectedElements() {
110 |             return this.options.filter(op => op.selected === true)
111 |         },
112 |         // get selected values
113 |         selectedValues() {
114 |             return this.options.filter(op => op.selected === true).map(el => el.value)
115 |         }
116 |     }));
117 | });


--------------------------------------------------------------------------------
/docs/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Alpine.js MultiSelect</title>
  8 |     <meta name="description" content="Configurable searching values, custom template, fast search no other JS dependencies">
  9 |     <script src="https://cdn.tailwindcss.com"></script>
 10 |     <script defer src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
 11 |     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 12 | 
 13 | </head>
 14 | 
 15 | <body>
 16 |     <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
 17 |         <div class="bg-white">
 18 |             <div class="px-4 py-16 mx-auto sm:py-24 sm:px-6 lg:px-8">
 19 |                 <div class="bg-white">
 20 |                     <div class="px-4 py-12 mx-auto text-center max-w-7xl sm:px-6 lg:py-16 lg:px-8">
 21 |                         <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 22 |                             <span class="block">Alpine.js MultiSelect</span>
 23 |                         </h2>
 24 |                         <span class="block mt-4">This example uses
 25 |                             <a href="https://tailwindcss.com/" target="_new" class="text-indigo-600" alt="Tailwind CSS">
 26 |                                 Tailwind CSS
 27 |                             </a>, 
 28 |                             <a href="https://heroicons.com/" target="_new" class="text-indigo-600" alt="Heroicons">
 29 |                                 Heroicons
 30 |                             </a>
 31 |                             and
 32 |                             <a href="https://alpinejs.dev/plugins/focus" target="_new" class="text-indigo-600" alt="Alpine's Focus plugin">
 33 |                                 Alpine's Focus plugin
 34 |                             </a>.</span>
 35 |                         <div class="flex justify-center mt-8">
 36 |                             <!-- Define component with preselected options -->
 37 |                             <div class="w-full" x-data="alpineMuliSelect({selected:['te_11', 'te_12'], elementId:'multSelect'})">
 38 | 
 39 |                                 <!-- Select Options -->
 40 |                                 <select class="hidden" id="multSelect">
 41 |                                     <option value="te_1" data-search="arsenal">Arsenal</option>
 42 |                                     <option value="te_2" data-search="aston villa">Aston Villa</option>
 43 |                                     <option value="te_3" data-search="Brentford">Brentford</option>
 44 |                                     <option value="te_4" data-search="Brighton">Brighton</option>
 45 |                                     <option value="te_5" data-search="Burnley">Burnley</option>
 46 |                                     <option value="te_6" data-search="Chelsea">Chelsea</option>
 47 |                                     <option value="te_7" data-search="Crystal Palace">Crystal Palace</option>
 48 |                                     <option value="te_8" data-search="Everton">Everton</option>
 49 |                                     <option value="te_10" data-search="Leeds">Leeds</option>
 50 |                                     <option value="te_9" data-search="Leicester">Leicester</option>
 51 |                                     <option value="te_11" data-search="Liverpool">Liverpool</option>
 52 |                                     <option value="te_12" data-search="Manchester City">Man City</option>
 53 |                                     <option value="te_13" data-search="Manchester Utd">Man Utd</option>
 54 |                                     <option value="te_14" data-search="Newcastle">Newcastle</option>
 55 |                                     <option value="te_15" data-search="Norwich">Norwich</option>
 56 |                                     <option value="te_16" data-search="Southampton">Southampton</option>
 57 |                                     <option value="te_17" data-search="Tottenham Hotspur spurs">Spurs</option>
 58 |                                     <option value="te_18" data-search="Watford">Watford</option>
 59 |                                     <option value="te_19" data-search="West Ham">West Ham</option>
 60 |                                     <option value="te_20" data-search="Wolves">Wolves</option>
 61 |                                 </select>
 62 | 
 63 |                                 <div class="w-full flex flex-col items-center h-64 mx-auto" @keyup.alt="toggle">
 64 |                                     <!-- Selected Teams -->
 65 |                                     <input name="teams[]" type="hidden" x-bind:value="selectedValues()">
 66 | 
 67 |                                     <div class="inline-block relative w-full">
 68 | 
 69 |                                         <div class="flex flex-col items-center relative">
 70 | 
 71 |                                             <!-- Selected elements container -->
 72 |                                             <div class="w-full">
 73 |                                                 <div class="my-2 p-1 flex border border-gray-200 bg-white rounded-md">
 74 |                                                     <div class="flex flex-auto flex-wrap" x-on:click="open">
 75 |                                                         <!-- iterating over selected elements -->
 76 |                                                         <template x-for="(option,index) in selectedElms" :key="option.value">
 77 |                                                             <div x-show="index < 2"
 78 |                                                                 class="flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full text-indigo-700 bg-indigo-100 border border-indigo-300 ">
 79 |                                                                 <div class="text-xs font-normal leading-none max-w-full flex-initial"
 80 |                                                                     x-model="selectedElms[option]" x-text="option.text"></div>
 81 |                                                                 <div class="flex flex-auto flex-row-reverse">
 82 |                                                                     <div x-on:click.stop="remove(index,option)">
 83 |                                                                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 84 |                                                                             <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
 85 |                                                                           </svg>
 86 |                                                                     </div>
 87 |                                                                 </div>
 88 |                                                             </div>
 89 |                                                         </template>
 90 |                                                         <!-- More than two items selected -->
 91 |                                                         <div x-show="selectedElms.length > 2" class="flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full text-indigo-700 bg-indigo-100 border border-indigo-300 ">
 92 |                                                             <div class="text-xs font-normal h-6 flex justify-center items-center leading-none max-w-full flex-initial">
 93 |                                                                 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-indigo-200 text-pink-800 mr-2">
 94 |                                                                     <span x-text="selectedElms.length -2"></span>
 95 |                                                                 </span>
 96 |                                                                 more selected
 97 |                                                             </div>
 98 |                                                         </div>
 99 |                                                         <!-- None items selected -->
100 |                                                         <div x-show="selectedElms.length == 0" class="flex-1">
101 |                                                             <input placeholder="Select teams" class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800" x-bind:value="selectedElements()">
102 |                                                         </div>
103 |                                                     </div>
104 |                                                     <!-- Drop down toogle with icons-->
105 |                                                     <div class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200">
106 |                                                         <button type="button" x-show="!isOpen()" x-on:click="open()" class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
107 |                                                             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
108 |                                                                 <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
109 |                                                               </svg>
110 |                                                         </button>
111 |                                                         <button type="button" x-show="isOpen()" x-on:click="close()" class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
112 |                                                             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
113 |                                                                 <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
114 |                                                               </svg>                                  
115 |                                                         </button>
116 |                                                     </div>
117 |                                                 </div>
118 |                                             </div>
119 |                                             <!-- Dropdown container -->
120 |                                             <div class="w-full">
121 |                                                 <div x-show.transition.origin.top="isOpen()" x-trap="isOpen()" class="absolute shadow-lg top-100 bg-white z-40 w-full lef-0 rounded max-h-80" x-on:click.away="close">
122 |                                                     <div class="flex flex-col w-full">
123 | 
124 |                                                         <div class="px-2 py-4 border-b-2">
125 |                                                             <!-- Search input-->
126 |                                                             <div class="mt-1 relative rounded-md shadow-sm">
127 |                                                                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
128 |                                                                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
129 |                                                                         <path stroke-linecap="round" stroke-linejoin="round"
130 |                                                                             d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
131 |                                                                     </svg>
132 |                                                                 </div>
133 |                                                                 <input type="text" name="search" autocomplete="off" id="search" x-model.debounce.750ms="search" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 sm:text-sm border border-indigo-300 rounded-md h-10" placeholder="" @keyup.escape="clear"
134 |                                                                     @keyup.delete="deselect">
135 |                                                                 <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
136 |                                                                     <kbd class="inline-flex items-center border border-gray-200 rounded px-2 text-sm font-sans font-medium text-gray-400 mr-2" x-on:click="clear">
137 |                                                                         Esc
138 |                                                                     </kbd>
139 |                                                                     <kbd class="inline-flex items-center border border-gray-200 rounded px-2 text-sm font-sans font-medium text-gray-400" x-on:click="deselect">
140 |                                                                         Del
141 |                                                                     </kbd>
142 |                                                                 </div>
143 |                                                             </div>
144 |                                                         </div>
145 |                                                         <!-- Options container -->
146 |                                                         <ul class="z-10 mt-0 w-full bg-white shadow-lg max-h-80 rounded-md py-0 text-base ring-1 ring-black ring-opacity-5 focus:outline-none  overflow-y-auto sm:text-sm" tabindex="-1" role="listbox" @keyup.delete="deselect">
147 |                                                             <template x-for="(option,index) in options" :key="option.text">
148 |                                                                 <li class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-3"
149 |                                                                     role="option">
150 |                                                                     <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-slate-100"
151 |                                                                         x-bind:class="option.selected ? 'bg-indigo-100' : ''"
152 |                                                                         @click="select(index,$event)">
153 |                                                                         <div x-bind:class="option.selected ? 'border-indigo-600' : ''"
154 |                                                                             class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
155 |                                                                             <div class="w-full items-center flex">
156 |                                                                                 <div class="mx-2 leading-6" x-model="option"
157 |                                                                                     x-text="option.text"></div>
158 |                                                                                 <span
159 |                                                                                     class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
160 |                                                                                     x-show="option.selected">
161 | 
162 |                                                                                     <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg"
163 |                                                                                         viewBox="0 0 20 20" fill="currentColor"
164 |                                                                                         aria-hidden="true">
165 |                                                                                         <path fill-rule="evenodd"
166 |                                                                                             d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
167 |                                                                                             clip-rule="evenodd" />
168 |                                                                                     </svg>
169 |                                                                                 </span>
170 |                                                                             </div>
171 |                                                                         </div>
172 |                                                                     </div>
173 |                                                                 </li>
174 |                                                             </template>
175 |                                                         </ul>
176 |                                                     </div>
177 |                                                 </div>
178 |                                             </div>
179 |                                         </div>
180 | 
181 |                                     </div>
182 |                                 </div>
183 | 
184 |                             </div>
185 |                         </div>
186 | 
187 | 
188 |                     </div>
189 |                 </div>
190 | 
191 |             </div>
192 |             <script>
193 |                 document.addEventListener("alpine:init", () => {
194 |                     Alpine.data("alpineMuliSelect", (obj) => ({
195 |                         elementId: obj.elementId,
196 |                         options: [],
197 |                         selected: obj.selected,
198 |                         selectedElms: [],
199 |                         show: false,
200 |                         search: '',
201 |                         open() {
202 |                             this.show = true
203 |                         },
204 |                         close() {
205 |                             this.show = false
206 |                         },
207 |                         toggle() {
208 |                             this.show = !this.show
209 |                         },
210 |                         isOpen() {
211 |                             return this.show === true
212 |                         },
213 | 
214 |                         // Initializing component 
215 |                         init() {
216 |                             const options = document.getElementById(this.elementId).options;
217 |                             for (let i = 0; i < options.length; i++) {
218 | 
219 |                                 this.options.push({
220 |                                     value: options[i].value,
221 |                                     text: options[i].innerText,
222 |                                     search: options[i].dataset.search,
223 |                                     selected: Object.values(this.selected).includes(options[i].value)
224 |                                 });
225 | 
226 |                                 if (this.options[i].selected) {
227 |                                     this.selectedElms.push(this.options[i])
228 |                                 }
229 |                             }
230 | 
231 | 
232 |                             // searching for the given value
233 |                             this.$watch("search", (e => {
234 |                                 this.options = []
235 |                                 const options = document.getElementById(this.elementId).options;
236 |                                 Object.values(options).filter((el) => {
237 |                                     var reg = new RegExp(this.search, 'gi');
238 |                                     return el.dataset.search.match(reg)
239 |                                 }).forEach((el) => {
240 |                                     let newel = {
241 |                                         value: el.value,
242 |                                         text: el.innerText,
243 |                                         search: el.dataset.search,
244 |                                         selected: Object.values(this.selected).includes(el.value)
245 |                                     }
246 |                                     this.options.push(newel);
247 | 
248 |                                 })
249 | 
250 | 
251 |                             }));
252 |                         },
253 |                         // clear search field
254 |                         clear() {
255 |                             this.search = ''
256 |                         },
257 |                         // deselect selected options
258 |                         deselect() {
259 |                             setTimeout(() => {
260 |                                 this.selected = []
261 |                                 this.selectedElms = []
262 |                                 Object.keys(this.options).forEach((key) => {
263 |                                     this.options[key].selected = false;
264 |                                 })
265 |                             }, 100)
266 |                         },
267 |                         // select given option
268 |                         select(index, event) {
269 |                             if (!this.options[index].selected) {
270 |                                 this.options[index].selected = true;
271 |                                 this.options[index].element = event.target;
272 |                                 this.selected.push(this.options[index].value);
273 |                                 this.selectedElms.push(this.options[index]);
274 | 
275 |                             } else {
276 |                                 this.selected.splice(this.selected.lastIndexOf(index), 1);
277 |                                 this.options[index].selected = false
278 |                                 Object.keys(this.selectedElms).forEach((key) => {
279 |                                     if (this.selectedElms[key].value == this.options[index].value) {
280 |                                         setTimeout(() => {
281 |                                             this.selectedElms.splice(key, 1)
282 |                                         }, 100)
283 |                                     }
284 |                                 })
285 |                             }
286 |                         },
287 |                         // remove from selected option
288 |                         remove(index, option) {
289 |                             this.selectedElms.splice(index, 1);
290 |                             Object.keys(this.selected).forEach((skey) => {
291 |                                     if (this.selected[skey] == option.value) {
292 |                                         this.selected.splice(skey, 1);
293 |                                     }
294 |                                 });
295 |                             Object.keys(this.options).forEach((key) => {
296 |                                 if (this.options[key].value == option.value) {
297 |                                     this.options[key].selected = false;
298 |                                 }
299 |                             });
300 |                         },
301 |                         // filter out selected elements
302 |                         selectedElements() {
303 |                             return this.options.filter(op => op.selected === true)
304 |                         },
305 |                         // get selected values
306 |                         selectedValues() {
307 |                             return this.options.filter(op => op.selected === true).map(el => el.value)
308 |                         }
309 |                     }));
310 |                 });
311 |             </script>
312 | </body>
313 | 
314 | </html>


--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
 1 | ## Welcome to GitHub Pages
 2 | 
 3 | You can use the [editor on GitHub](https://github.com/alexpechkarev/alpinejs-multiselect/edit/main/docs/index.md) to maintain and preview the content for your website in Markdown files.
 4 | 
 5 | Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
 6 | 
 7 | ### Markdown
 8 | 
 9 | Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
10 | 
11 | ```markdown
12 | Syntax highlighted code block
13 | 
14 | # Header 1
15 | ## Header 2
16 | ### Header 3
17 | 
18 | - Bulleted
19 | - List
20 | 
21 | 1. Numbered
22 | 2. List
23 | 
24 | **Bold** and _Italic_ and `Code` text
25 | 
26 | [Link](url) and ![Image](src)
27 | ```
28 | 
29 | For more details see [Basic writing and formatting syntax](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax).
30 | 
31 | ### Jekyll Themes
32 | 
33 | Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/alexpechkarev/alpinejs-multiselect/settings/pages). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
34 | 
35 | ### Support or Contact
36 | 
37 | Having trouble with Pages? Check out our [documentation](https://docs.github.com/categories/github-pages-basics/) or [contact support](https://support.github.com/contact) and we’ll help you sort it out.
38 | 


--------------------------------------------------------------------------------