Merge pull request #6 from RabbiIslamRony/licensing-search

Added search support

Author: HeyMehedi

includes/licensing/assets/script.js

@@ -211,6 +211,30 @@ function handlePostRequest(formSelector, endpoint, successCallback, errorCallbac
     });
 }
 
+function handleSearch({ inputSelector, searchGroups }) {
+    const searchInput = document.querySelector(inputSelector);
+    if (!searchInput) return;
+
+    searchInput.addEventListener('input', function () {
+        const query = this.value.toLowerCase();
+
+        searchGroups.forEach(group => {
+            const container = document.querySelector(group.containerSelector);
+            if (!container) return;
+
+            const items = container.querySelectorAll(group.itemSelector);
+
+            items.forEach(item => {
+                const title = item.querySelector(group.titleSelector)?.textContent.toLowerCase() || '';
+                const description = item.querySelector(group.descriptionSelector)?.textContent.toLowerCase() || '';
+
+                item.style.display = (title.includes(query) || description.includes(query)) ? '' : 'none';
+            });
+        });
+    });
+}
+
+
 document.addEventListener("DOMContentLoaded", function () {
 
     handlePostRequest(
@@ -548,4 +572,21 @@ document.addEventListener("DOMContentLoaded", function () {
     initializeDirectoristTabs(".directorist-tabs", ".directorist-nav-tab", ".directorist-tabs-item");
     handlePricingTabClick(".directorist-nav-tab-wrapper", "button", ".directorist-nav-tab-wrapper");
     progressbar(".directorist-progress-inner");
+    handleSearch({
+        inputSelector: '.directorist-product-search-input',
+        searchGroups: [
+            {
+                containerSelector: '#directorist-extensions .directorist-row',
+                itemSelector: '#directorist-extensions .directorist-col-xxl-3',
+                titleSelector: '.directorist-extension-title',
+                descriptionSelector: '.directorist-extension-description'
+            },
+            {
+                containerSelector: '#directorist-templates .directorist-row',
+                itemSelector: '#directorist-templates .directorist-col-xxl-3',
+                titleSelector: '.directorist-template-title',
+                descriptionSelector: '.directorist-template-description'
+            }
+        ]
+    });
 });

includes/licensing/assets/scss/components/components.scss

@@ -799,7 +799,7 @@
     }
 
     &-input {
-        &[type=text] {
+        &[type=search] {
             font-size: 12px;
             font-style: normal;
             font-weight: 400;

includes/licensing/assets/style.css

@@ -48,7 +48,7 @@
 					</svg>
 				</span>
 
-				<input type="text" placeholder="<?php esc_html_e( 'Search...', 'directorist' ); ?>" class="directorist-product-search-input">
+				<input type="search" placeholder="<?php esc_html_e( 'Search...', 'directorist' ); ?>" class="directorist-product-search-input">
 			</div>
 		</div>