From c7e58bf5df4857abadc41a352fcc5d6e717ccacc Mon Sep 17 00:00:00 2001
From: Vincent Orback <hello@vincentorback.se>
Date: Fri, 9 Apr 2021 10:51:49 +0200
Subject: [PATCH] extended options search words

---
 README.md                     |  8 +++++
 dist/multi-es6.min.js         |  4 +--
 dist/multi.min.js             |  4 +--
 examples/extended-search.html | 57 +++++++++++++++++++++++++++++++++++
 src/multi.js                  |  8 ++++-
 5 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 examples/extended-search.html

diff --git a/README.md b/README.md
index c09fe42..9d16368 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,14 @@ multi(select_element, {
 });
 ```
 
+### Extended search
+
+You can extended your options search abilities by adding custom search parameters in `data-search=""` to your options.
+
+```html
+<option data-search="delicious taste for a pie">Apple</option>
+```
+
 ### jQuery
 
 multi.js is fully native Javascript but also has jQuery support. If you have jQuery included multi can be applied to a select element as follows:
diff --git a/dist/multi-es6.min.js b/dist/multi-es6.min.js
index e9a8c4f..2511699 100644
--- a/dist/multi-es6.min.js
+++ b/dist/multi-es6.min.js
@@ -1,3 +1,3 @@
-/*! multi.js 17-02-2021 */
+/*! multi.js 08-04-2021 */
 
-var multi=function(){var e=function(e,t){var n=t.limit;if(n>-1){for(var a=0,i=0;i<e.options.length;i++)e.options[i].selected&&a++;if(a===n){this.disabled_limit=!0,"function"==typeof t.limit_reached&&t.limit_reached();for(i=0;i<e.options.length;i++){(d=e.options[i]).selected||d.setAttribute("disabled",!0)}}else if(this.disabled_limit){for(i=0;i<e.options.length;i++){var d;"false"===(d=e.options[i]).getAttribute("data-origin-disabled")&&d.removeAttribute("disabled")}this.disabled_limit=!1}}},t=function(t,n,a){var i,d,l,r=t.options[n.target.getAttribute("multi-index")];r.disabled||(r.selected=!r.selected,e(t,a),i="change",d=t,(l=document.createEvent("HTMLEvents")).initEvent(i,!1,!0),d.dispatchEvent(l))},n=function(e,t){if(e.wrapper.selected.innerHTML="",e.wrapper.non_selected.innerHTML="",t.non_selected_header&&t.selected_header){var n=document.createElement("div"),a=document.createElement("div");n.className="header",a.className="header",n.innerText=t.non_selected_header,a.innerText=t.selected_header,e.wrapper.non_selected.appendChild(n),e.wrapper.selected.appendChild(a)}if(e.wrapper.search)var i=e.wrapper.search.value;for(var d=null,l=null,r=0;r<e.options.length;r++){var s=e.options[r],o=s.value,c=s.textContent||s.innerText,p=document.createElement("a");if(p.tabIndex=0,p.className="item",p.innerText=c,p.setAttribute("role","button"),p.setAttribute("data-value",o),p.setAttribute("multi-index",r),s.disabled&&(p.className+=" disabled"),s.selected){p.className+=" selected";var u=p.cloneNode(!0);e.wrapper.selected.appendChild(u)}if("OPTGROUP"==s.parentNode.nodeName&&s.parentNode!=l){if(l=s.parentNode,(d=document.createElement("div")).className="item-group",s.parentNode.label){var m=document.createElement("span");m.innerHTML=s.parentNode.label,m.className="group-label",d.appendChild(m)}e.wrapper.non_selected.appendChild(d)}s.parentNode==e&&(d=null,l=null),(!i||i&&c.toLowerCase().indexOf(i.toLowerCase())>-1)&&(null!=d?d.appendChild(p):e.wrapper.non_selected.appendChild(p))}if(t.hide_empty_groups){var h=document.getElementsByClassName("item-group");for(r=0;r<h.length;r++)h[r].childElementCount<2&&(h[r].style.display="none")}};return function(a,i){if((i=void 0!==i?i:{}).enable_search=void 0===i.enable_search||i.enable_search,i.search_placeholder=void 0!==i.search_placeholder?i.search_placeholder:"Search...",i.non_selected_header=void 0!==i.non_selected_header?i.non_selected_header:null,i.selected_header=void 0!==i.selected_header?i.selected_header:null,i.limit=void 0!==i.limit?parseInt(i.limit):-1,isNaN(i.limit)&&(i.limit=-1),i.hide_empty_groups=void 0!==i.hide_empty_groups&&i.hide_empty_groups,null==a.dataset.multijs&&"SELECT"==a.nodeName&&a.multiple){a.style.display="none",a.setAttribute("data-multijs",!0);var d=document.createElement("div");if(d.className="multi-wrapper",i.enable_search){var l=document.createElement("input");l.className="search-input",l.type="text",l.setAttribute("placeholder",i.search_placeholder),l.setAttribute("title",i.search_placeholder),l.addEventListener("input",function(){n(a,i)}),d.appendChild(l),d.search=l}var r=document.createElement("div");r.className="non-selected-wrapper";var s=document.createElement("div");s.className="selected-wrapper",d.addEventListener("click",function(e){e.target.getAttribute("multi-index")&&t(a,e,i)}),d.addEventListener("keypress",function(e){var n=32===e.keyCode||13===e.keyCode;e.target.getAttribute("multi-index")&&n&&(e.preventDefault(),t(a,e,i))}),d.appendChild(r),d.appendChild(s),d.non_selected=r,d.selected=s,a.wrapper=d,a.parentNode.insertBefore(d,a.nextSibling);for(var o=0;o<a.options.length;o++){var c=a.options[o];c.setAttribute("data-origin-disabled",c.disabled)}e(a,i),n(a,i),a.addEventListener("change",function(){n(a,i)})}}}();"undefined"!=typeof jQuery&&function(e){e.fn.multi=function(t){return t=void 0!==t?t:{},this.each(function(){var n=e(this);multi(n.get(0),t)})}}(jQuery);export default multi;
\ No newline at end of file
+var multi=function(){var e=function(e,t){var a=t.limit;if(a>-1){for(var n=0,i=0;i<e.options.length;i++)e.options[i].selected&&n++;if(n===a){this.disabled_limit=!0,"function"==typeof t.limit_reached&&t.limit_reached();for(i=0;i<e.options.length;i++){(r=e.options[i]).selected||r.setAttribute("disabled",!0)}}else if(this.disabled_limit){for(i=0;i<e.options.length;i++){var r;"false"===(r=e.options[i]).getAttribute("data-origin-disabled")&&r.removeAttribute("disabled")}this.disabled_limit=!1}}},t=function(t,a,n){var i,r,d,l=t.options[a.target.getAttribute("multi-index")];l.disabled||(l.selected=!l.selected,e(t,n),i="change",r=t,(d=document.createEvent("HTMLEvents")).initEvent(i,!1,!0),r.dispatchEvent(d))},a=function(e,t){if(e.wrapper.selected.innerHTML="",e.wrapper.non_selected.innerHTML="",t.non_selected_header&&t.selected_header){var a=document.createElement("div"),n=document.createElement("div");a.className="header",n.className="header",a.innerText=t.non_selected_header,n.innerText=t.selected_header,e.wrapper.non_selected.appendChild(a),e.wrapper.selected.appendChild(n)}if(e.wrapper.search)var i=e.wrapper.search.value;for(var r=null,d=null,l=0;l<e.options.length;l++){var s=e.options[l],o=s.value,c=s.textContent||s.innerText,p=s.getAttribute("data-search"),u=document.createElement("a");if(u.tabIndex=0,u.className="item",u.innerText=c,u.setAttribute("role","button"),u.setAttribute("data-value",o),u.setAttribute("multi-index",l),p&&u.setAttribute("data-search",p),s.disabled&&(u.className+=" disabled"),s.selected){u.className+=" selected";var m=u.cloneNode(!0);e.wrapper.selected.appendChild(m)}if("OPTGROUP"==s.parentNode.nodeName&&s.parentNode!=d){if(d=s.parentNode,(r=document.createElement("div")).className="item-group",s.parentNode.label){var h=document.createElement("span");h.innerHTML=s.parentNode.label,h.className="group-label",r.appendChild(h)}e.wrapper.non_selected.appendChild(r)}s.parentNode==e&&(r=null,d=null),(!i||i&&c.toLowerCase().indexOf(i.toLowerCase())>-1||i&&p&&p.toLowerCase().indexOf(i.toLowerCase())>-1||t.search_multiple_words&&i&&i.split(" ").some(e=>""!==e&&(c.toLowerCase().indexOf(e.toLowerCase())>-1||p&&p.toLowerCase().indexOf(e.toLowerCase())>-1)))&&(null!=r?r.appendChild(u):e.wrapper.non_selected.appendChild(u))}if(t.hide_empty_groups){var _=document.getElementsByClassName("item-group");for(l=0;l<_.length;l++)_[l].childElementCount<2&&(_[l].style.display="none")}};return function(n,i){if((i=void 0!==i?i:{}).enable_search=void 0===i.enable_search||i.enable_search,i.search_placeholder=void 0!==i.search_placeholder?i.search_placeholder:"Search...",i.non_selected_header=void 0!==i.non_selected_header?i.non_selected_header:null,i.selected_header=void 0!==i.selected_header?i.selected_header:null,i.limit=void 0!==i.limit?parseInt(i.limit):-1,isNaN(i.limit)&&(i.limit=-1),i.hide_empty_groups=void 0!==i.hide_empty_groups&&i.hide_empty_groups,i.search_multiple_words=void 0!==i.search_multiple_words&&i.search_multiple_words,null==n.dataset.multijs&&"SELECT"==n.nodeName&&n.multiple){n.style.display="none",n.setAttribute("data-multijs",!0);var r=document.createElement("div");if(r.className="multi-wrapper",i.enable_search){var d=document.createElement("input");d.className="search-input",d.type="text",d.setAttribute("placeholder",i.search_placeholder),d.setAttribute("title",i.search_placeholder),d.addEventListener("input",function(){a(n,i)}),r.appendChild(d),r.search=d}var l=document.createElement("div");l.className="non-selected-wrapper";var s=document.createElement("div");s.className="selected-wrapper",r.addEventListener("click",function(e){e.target.getAttribute("multi-index")&&t(n,e,i)}),r.addEventListener("keypress",function(e){var a=32===e.keyCode||13===e.keyCode;e.target.getAttribute("multi-index")&&a&&(e.preventDefault(),t(n,e,i))}),r.appendChild(l),r.appendChild(s),r.non_selected=l,r.selected=s,n.wrapper=r,n.parentNode.insertBefore(r,n.nextSibling);for(var o=0;o<n.options.length;o++){var c=n.options[o];c.setAttribute("data-origin-disabled",c.disabled)}e(n,i),a(n,i),n.addEventListener("change",function(){a(n,i)})}}}();"undefined"!=typeof jQuery&&function(e){e.fn.multi=function(t){return t=void 0!==t?t:{},this.each(function(){var a=e(this);multi(a.get(0),t)})}}(jQuery);export default multi;
\ No newline at end of file
diff --git a/dist/multi.min.js b/dist/multi.min.js
index b3c35c9..f3dab42 100644
--- a/dist/multi.min.js
+++ b/dist/multi.min.js
@@ -1,3 +1,3 @@
-/*! multi.js 17-02-2021 */
+/*! multi.js 08-04-2021 */
 
-var multi=function(){var e=function(e,t){var n=t.limit;if(n>-1){for(var a=0,i=0;i<e.options.length;i++)e.options[i].selected&&a++;if(a===n){this.disabled_limit=!0,"function"==typeof t.limit_reached&&t.limit_reached();for(i=0;i<e.options.length;i++){(d=e.options[i]).selected||d.setAttribute("disabled",!0)}}else if(this.disabled_limit){for(i=0;i<e.options.length;i++){var d;"false"===(d=e.options[i]).getAttribute("data-origin-disabled")&&d.removeAttribute("disabled")}this.disabled_limit=!1}}},t=function(t,n,a){var i,d,r,l=t.options[n.target.getAttribute("multi-index")];l.disabled||(l.selected=!l.selected,e(t,a),i="change",d=t,(r=document.createEvent("HTMLEvents")).initEvent(i,!1,!0),d.dispatchEvent(r))},n=function(e,t){if(e.wrapper.selected.innerHTML="",e.wrapper.non_selected.innerHTML="",t.non_selected_header&&t.selected_header){var n=document.createElement("div"),a=document.createElement("div");n.className="header",a.className="header",n.innerText=t.non_selected_header,a.innerText=t.selected_header,e.wrapper.non_selected.appendChild(n),e.wrapper.selected.appendChild(a)}if(e.wrapper.search)var i=e.wrapper.search.value;for(var d=null,r=null,l=0;l<e.options.length;l++){var s=e.options[l],o=s.value,c=s.textContent||s.innerText,p=document.createElement("a");if(p.tabIndex=0,p.className="item",p.innerText=c,p.setAttribute("role","button"),p.setAttribute("data-value",o),p.setAttribute("multi-index",l),s.disabled&&(p.className+=" disabled"),s.selected){p.className+=" selected";var u=p.cloneNode(!0);e.wrapper.selected.appendChild(u)}if("OPTGROUP"==s.parentNode.nodeName&&s.parentNode!=r){if(r=s.parentNode,(d=document.createElement("div")).className="item-group",s.parentNode.label){var m=document.createElement("span");m.innerHTML=s.parentNode.label,m.className="group-label",d.appendChild(m)}e.wrapper.non_selected.appendChild(d)}s.parentNode==e&&(d=null,r=null),(!i||i&&c.toLowerCase().indexOf(i.toLowerCase())>-1)&&(null!=d?d.appendChild(p):e.wrapper.non_selected.appendChild(p))}if(t.hide_empty_groups){var h=document.getElementsByClassName("item-group");for(l=0;l<h.length;l++)h[l].childElementCount<2&&(h[l].style.display="none")}};return function(a,i){if((i=void 0!==i?i:{}).enable_search=void 0===i.enable_search||i.enable_search,i.search_placeholder=void 0!==i.search_placeholder?i.search_placeholder:"Search...",i.non_selected_header=void 0!==i.non_selected_header?i.non_selected_header:null,i.selected_header=void 0!==i.selected_header?i.selected_header:null,i.limit=void 0!==i.limit?parseInt(i.limit):-1,isNaN(i.limit)&&(i.limit=-1),i.hide_empty_groups=void 0!==i.hide_empty_groups&&i.hide_empty_groups,null==a.dataset.multijs&&"SELECT"==a.nodeName&&a.multiple){a.style.display="none",a.setAttribute("data-multijs",!0);var d=document.createElement("div");if(d.className="multi-wrapper",i.enable_search){var r=document.createElement("input");r.className="search-input",r.type="text",r.setAttribute("placeholder",i.search_placeholder),r.setAttribute("title",i.search_placeholder),r.addEventListener("input",function(){n(a,i)}),d.appendChild(r),d.search=r}var l=document.createElement("div");l.className="non-selected-wrapper";var s=document.createElement("div");s.className="selected-wrapper",d.addEventListener("click",function(e){e.target.getAttribute("multi-index")&&t(a,e,i)}),d.addEventListener("keypress",function(e){var n=32===e.keyCode||13===e.keyCode;e.target.getAttribute("multi-index")&&n&&(e.preventDefault(),t(a,e,i))}),d.appendChild(l),d.appendChild(s),d.non_selected=l,d.selected=s,a.wrapper=d,a.parentNode.insertBefore(d,a.nextSibling);for(var o=0;o<a.options.length;o++){var c=a.options[o];c.setAttribute("data-origin-disabled",c.disabled)}e(a,i),n(a,i),a.addEventListener("change",function(){n(a,i)})}}}();"undefined"!=typeof jQuery&&function(e){e.fn.multi=function(t){return t=void 0!==t?t:{},this.each(function(){var n=e(this);multi(n.get(0),t)})}}(jQuery);
\ No newline at end of file
+var multi=function(){var e=function(e,t){var a=t.limit;if(a>-1){for(var n=0,i=0;i<e.options.length;i++)e.options[i].selected&&n++;if(n===a){this.disabled_limit=!0,"function"==typeof t.limit_reached&&t.limit_reached();for(i=0;i<e.options.length;i++){(r=e.options[i]).selected||r.setAttribute("disabled",!0)}}else if(this.disabled_limit){for(i=0;i<e.options.length;i++){var r;"false"===(r=e.options[i]).getAttribute("data-origin-disabled")&&r.removeAttribute("disabled")}this.disabled_limit=!1}}},t=function(t,a,n){var i,r,d,l=t.options[a.target.getAttribute("multi-index")];l.disabled||(l.selected=!l.selected,e(t,n),i="change",r=t,(d=document.createEvent("HTMLEvents")).initEvent(i,!1,!0),r.dispatchEvent(d))},a=function(e,t){if(e.wrapper.selected.innerHTML="",e.wrapper.non_selected.innerHTML="",t.non_selected_header&&t.selected_header){var a=document.createElement("div"),n=document.createElement("div");a.className="header",n.className="header",a.innerText=t.non_selected_header,n.innerText=t.selected_header,e.wrapper.non_selected.appendChild(a),e.wrapper.selected.appendChild(n)}if(e.wrapper.search)var i=e.wrapper.search.value;for(var r=null,d=null,l=0;l<e.options.length;l++){var s=e.options[l],o=s.value,c=s.textContent||s.innerText,p=s.getAttribute("data-search"),u=document.createElement("a");if(u.tabIndex=0,u.className="item",u.innerText=c,u.setAttribute("role","button"),u.setAttribute("data-value",o),u.setAttribute("multi-index",l),p&&u.setAttribute("data-search",p),s.disabled&&(u.className+=" disabled"),s.selected){u.className+=" selected";var m=u.cloneNode(!0);e.wrapper.selected.appendChild(m)}if("OPTGROUP"==s.parentNode.nodeName&&s.parentNode!=d){if(d=s.parentNode,(r=document.createElement("div")).className="item-group",s.parentNode.label){var h=document.createElement("span");h.innerHTML=s.parentNode.label,h.className="group-label",r.appendChild(h)}e.wrapper.non_selected.appendChild(r)}s.parentNode==e&&(r=null,d=null),(!i||i&&c.toLowerCase().indexOf(i.toLowerCase())>-1||i&&p&&p.toLowerCase().indexOf(i.toLowerCase())>-1||t.search_multiple_words&&i&&i.split(" ").some(e=>""!==e&&(c.toLowerCase().indexOf(e.toLowerCase())>-1||p&&p.toLowerCase().indexOf(e.toLowerCase())>-1)))&&(null!=r?r.appendChild(u):e.wrapper.non_selected.appendChild(u))}if(t.hide_empty_groups){var _=document.getElementsByClassName("item-group");for(l=0;l<_.length;l++)_[l].childElementCount<2&&(_[l].style.display="none")}};return function(n,i){if((i=void 0!==i?i:{}).enable_search=void 0===i.enable_search||i.enable_search,i.search_placeholder=void 0!==i.search_placeholder?i.search_placeholder:"Search...",i.non_selected_header=void 0!==i.non_selected_header?i.non_selected_header:null,i.selected_header=void 0!==i.selected_header?i.selected_header:null,i.limit=void 0!==i.limit?parseInt(i.limit):-1,isNaN(i.limit)&&(i.limit=-1),i.hide_empty_groups=void 0!==i.hide_empty_groups&&i.hide_empty_groups,i.search_multiple_words=void 0!==i.search_multiple_words&&i.search_multiple_words,null==n.dataset.multijs&&"SELECT"==n.nodeName&&n.multiple){n.style.display="none",n.setAttribute("data-multijs",!0);var r=document.createElement("div");if(r.className="multi-wrapper",i.enable_search){var d=document.createElement("input");d.className="search-input",d.type="text",d.setAttribute("placeholder",i.search_placeholder),d.setAttribute("title",i.search_placeholder),d.addEventListener("input",function(){a(n,i)}),r.appendChild(d),r.search=d}var l=document.createElement("div");l.className="non-selected-wrapper";var s=document.createElement("div");s.className="selected-wrapper",r.addEventListener("click",function(e){e.target.getAttribute("multi-index")&&t(n,e,i)}),r.addEventListener("keypress",function(e){var a=32===e.keyCode||13===e.keyCode;e.target.getAttribute("multi-index")&&a&&(e.preventDefault(),t(n,e,i))}),r.appendChild(l),r.appendChild(s),r.non_selected=l,r.selected=s,n.wrapper=r,n.parentNode.insertBefore(r,n.nextSibling);for(var o=0;o<n.options.length;o++){var c=n.options[o];c.setAttribute("data-origin-disabled",c.disabled)}e(n,i),a(n,i),n.addEventListener("change",function(){a(n,i)})}}}();"undefined"!=typeof jQuery&&function(e){e.fn.multi=function(t){return t=void 0!==t?t:{},this.each(function(){var a=e(this);multi(a.get(0),t)})}}(jQuery);
\ No newline at end of file
diff --git a/examples/extended-search.html b/examples/extended-search.html
new file mode 100644
index 0000000..f1842d3
--- /dev/null
+++ b/examples/extended-search.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>multi.js Extended Search Example</title>
+
+        <!-- Include multi.js -->
+        <link rel="stylesheet" type="text/css" href="../dist/multi.min.css" />
+        <script src="../dist/multi.min.js"></script>
+
+        <style>
+            /* Basic styling */
+            body {
+                font-family: sans-serif;
+            }
+
+            .container {
+                box-sizing: border-box;
+                margin: 0 auto;
+                max-width: 500px;
+                padding: 0 20px;
+                width: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <h1>multi.js</h1>
+
+            <form>
+                <select
+                    multiple="multiple"
+                    name="favorite_fruits"
+                    id="fruit_select"
+                >
+                    <option data-search="Fuji Gala Pink Lady">Apple</option>
+                    <option>Banana</option>
+                    <option>Blueberry</option>
+                    <option>Cherry</option>
+                    <option>Coconut</option>
+                    <option>Grapefruit</option>
+                    <option>Kiwi</option>
+                    <option>Lemon</option>
+                    <option>Lime</option>
+                    <option>Mango</option>
+                    <option data-search="Clementine Mandarine Tangerine">Orange</option>
+                    <option>Papaya</option>
+                </select>
+            </form>
+        </div>
+
+        <script>
+            var select = document.getElementById("fruit_select");
+            multi(select)
+        </script>
+    </body>
+</html>
diff --git a/src/multi.js b/src/multi.js
index fe0c44e..13099f8 100644
--- a/src/multi.js
+++ b/src/multi.js
@@ -110,6 +110,7 @@ var multi = (function() {
 
       var value = option.value;
       var label = option.textContent || option.innerText;
+      var search = option.getAttribute('data-search')
 
       var row = document.createElement("a");
       row.tabIndex = 0;
@@ -119,6 +120,10 @@ var multi = (function() {
       row.setAttribute("data-value", value);
       row.setAttribute("multi-index", i);
 
+      if (search) {
+        row.setAttribute("data-search", search);
+      }
+
       if (option.disabled) {
         row.className += " disabled";
       }
@@ -158,7 +163,8 @@ var multi = (function() {
       // Apply search filtering
       if (
         !query ||
-        (query && label.toLowerCase().indexOf(query.toLowerCase()) > -1)
+        (query && label.toLowerCase().indexOf(query.toLowerCase()) > -1) ||
+        (query && search && search.toLowerCase().indexOf(query.toLowerCase()) > -1)
       ) {
         // Append to group if one exists, else just append to wrapper
         if (item_group != null) {