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 + +``` + ### 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-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-1){for(var n=0,i=0;i-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-1){for(var a=0,i=0;i-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-1){for(var n=0,i=0;i-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 + + + + multi.js Extended Search Example + + + + + + + + +
+

multi.js

+ +
+ +
+
+ + + + 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) {