creating a generic multiselect dropdown using select2 that can be used anywhere in...

diff --git a/css/admin.css b/css/admin.css
index 70c2c83..58acea1 100755 (executable)
--- a/css/admin.css
+++ b/css/admin.css
@@ -804,3 +804,6 @@ td.glm-nowrap {
     cursor: pointer;
 }
 .glm-import-td { padding:15px !important; margin: 0; }
+.select2-container .select2-search--inline{
+    clear: both;
+}

diff --git a/models/admin/members/list.php b/models/admin/members/list.php
index cb5feae..2a59c82 100755 (executable)
--- a/models/admin/members/list.php
+++ b/models/admin/members/list.php
@@ -126,6 +126,11 @@ class GlmMembersAdmin_members_list extends GlmDataMembers
         $enable_members     = $this->config['settings']['enable_members'];
         $textSearch         = false;
 
+        wp_enqueue_style('select2',"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" );
+        wp_enqueue_script('select2js', "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js" );
+        // GlmScriptRegistry::selectScript( GlmScriptType::Style, 'Select2CSS' );
+        // GlmScriptRegistry::selectScript( GlmScriptType::Script, 'Select2JS' );
+        
         // Save all query parameters
         if ( isset( $_REQUEST['glm_action'] ) && $_REQUEST['glm_action'] == 'list' ) {
             $_SESSION['member_saved_search'] = $_REQUEST;

diff --git a/setup/registerAdminScriptStyle.php b/setup/registerAdminScriptStyle.php
index cf5243c..80e6d53 100644 (file)
--- a/setup/registerAdminScriptStyle.php
+++ b/setup/registerAdminScriptStyle.php
@@ -73,3 +73,28 @@
  * USING THIS REGISTRY ONLY.
  */
 
+/*
+ * Select2.js
+ */
+// GlmScriptRegistry::addScript(
+//     [
+//         'type' => GlmScriptType::Script,
+//         'handle' => 'Select2JS',
+//         'src' => "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js",
+//         'deps' => array(
+//             'jquery'
+//         ),
+//         'in_footer' => true,
+//         'plugin' => GLM_MEMBERS_PLUGIN_SLUG,
+//         'version' => GLM_MEMBERS_PLUGIN_VERSION
+//     ] 
+// );
+// GlmScriptRegistry::addScript(
+//     [
+//         'type' => GlmScriptType::Style,
+//         'handle' => 'Select2CSS',
+//         'src' => "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css",
+//         'plugin' => GLM_MEMBERS_PLUGIN_SLUG,
+//         'version' => GLM_MEMBERS_PLUGIN_VERSION
+//     ] 
+// );

diff --git a/views/admin/members/list.html b/views/admin/members/list.html
index 414903e..26125ab 100644 (file)
--- a/views/admin/members/list.html
+++ b/views/admin/members/list.html
@@ -13,16 +13,15 @@
             <input type="submit" value="Submit" style="margin-right: 2em;">
         </div>
 <!--                <th>{$terms.term_member_plur_cap} Found:</th><td><span style="margin-right: 2em;">{$memberCount}</span></td> -->
-        <div class="glm-row">
-            <b>Categories: </b>
-            <select id="filterCategories" name="filterCategories[]" multiple="multiple" size="1">
-    {foreach from=$categories item=v}
-                <option value="{$v.id}" data-parent="{$v.parent}"{if $v.selected} selected{/if}>
-                    {if $v.parent_id}&nbsp;&nbsp;&nbsp;&nbsp;{/if}{$v.name}
-                </option>
-    {/foreach}
-            </select>
-        </div>
+
+        <!-- Multiselect Search Module. Set the necessary parameters for the element here -->
+        {assign var="multiSelectFilterID" value="filterCategories"}
+        {assign var="multiSelectFilterName" value="filterCategories[]"}
+        {assign var="multiSelectFilterData" value=$categories}
+        {assign var="multiSelectFilterPlaceholder" value="Filter Categories"}
+        {assign var="multiSelectFilterSearchTerm" value="Categories"}
+        {include file='admin/ui/multiSelectSearch.html'}
+        <!-- End Multiselect Search Module -->
 
         <div class="glm-row">
             <b>{$terms.term_member_cap} Types</b>
@@ -394,7 +393,9 @@
              $('.ui-autocomplete').css('height','200px').css('overflow-y','scroll');
 
              // Expand multi-select on hover
-             $('#filterCategories').multiselect();
+            //  $('#filterCategories').multiselect();
+     
+
              $('#exportFilterCategories').multiselect();
 
 

diff --git a/views/admin/ui/multiSelectSearch.html b/views/admin/ui/multiSelectSearch.html
new file mode 100644 (file)
index 0000000..90e9af0
--- /dev/null
+++ b/views/admin/ui/multiSelectSearch.html
@@ -0,0 +1,18 @@
+
+<div class="glm-row">
+    <b>{$multiSelectFilterSearchTerm}: </b>
+    <select id="{$multiSelectFilterID}" name="{$multiSelectFilterName}" multiple="multiple" size="1">
+{foreach from=$multiSelectFilterData item=v}
+        <option value="{$v.id}" data-parent="{$v.parent}"{if $v.selected} selected{/if}>
+            {if $v.parent_id}&nbsp;&nbsp;&nbsp;&nbsp;{/if}{$v.name}
+        </option>
+{/foreach}
+    </select>
+</div>
+<script>
+    jQuery(function($){
+        $("#{$multiSelectFilterID}").select2({
+            placeholder: "{$multiSelectFilterPlaceholder}"
+        });
+    });
+</script>
\ No newline at end of file