Adding a manufacturer search in the printer selection

fr3ak2402 · Jul 26, 2023 · 3585745 · 3585745
1 parent b99a7b9
commit 3585745
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 6 deletions.
diff --git a/resources/web/guide/21/21.js b/resources/web/guide/21/21.js
@@ -67,7 +67,7 @@ function HandleModelList( pVal )
 			if( sVV=="Other")
 				sVV="Orca colosseum";
 
-			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
+			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'" VendorName="'+sVV+'">'+
 '<div class="BlockBanner">'+
 '	<div class="BannerBtns">'+
 '		<div class="SmallBtn_Green trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
@@ -228,6 +228,47 @@ function ShowNotice( nShow )
 	}
 }
 
+function FilterVendor()
+{
+    var inputValue = $('#Search').val();
+
+    if (inputValue.trim() !== '') 
+	{
+        var searchedVendor = $('#Search').val().trim();
+
+
+
+        // Search for elements with the attribute "VendorName" and check them
+        $('[VendorName]').each(function() 
+		{
+            var nameVendor = $(this).attr('VendorName');
+
+            if (nameVendor.includes(searchedVendor)) 
+			{
+                $(this).show(); // The element's vendor value contains the searched string, show it
+            } 
+			else 
+			{
+                $(this).hide(); // The element has a different vendor value or doesn't contain the string, hide it
+            }
+        });
+    } 
+	else 
+	{
+        $('[VendorName]').show();
+    }
+}
 
+$(document).ready(function() 
+{
+    $('#Search').on('input', function() 
+	{
+        FilterVendor();
+    });
 
-
+    $('#Clear').click(function() 
+	{
+        $('#Search').val(''); // Clear the input field
+        $('[VendorName]').show(); // Show all Vendor elements
+    });
+});
diff --git a/resources/web/guide/21/index.html b/resources/web/guide/21/index.html
@@ -26,7 +26,7 @@
     </div>
 
     <div id="SearchWrapper">
-        <input class="trans" tid="t100" type="text" id="Search" placeholder="Search">
+        <input class="trans" tid="t100" type="search" id="Search" placeholder="Search" spellcheck="false" onchange="FilterVendor()">
     </div>
 </div>
 

diff --git a/resources/web/guide/24/24.js b/resources/web/guide/24/24.js
@@ -67,7 +67,7 @@ function HandleModelList( pVal )
 			if( sVV=="Other")
 				sVV="Orca colosseum";
 
-			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
+			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'" VendorName="'+sVV+'">'+
 '<div class="BlockBanner">'+
 '	<div class="BannerBtns">'+
 '		<div class="SmallBtn_Green trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
@@ -247,6 +247,47 @@ function ConfirmSelect()
 	}
 }
 
+function FilterVendor()
+{
+    var inputValue = $('#Search').val();
+
+    if (inputValue.trim() !== '') 
+	{
+        var searchedVendor = $('#Search').val().trim();
+
+
+
+        // Search for elements with the attribute "VendorName" and check them
+        $('[VendorName]').each(function() 
+		{
+            var nameVendor = $(this).attr('VendorName');
+
+            if (nameVendor.includes(searchedVendor)) 
+			{
+                $(this).show(); // The element's vendor value contains the searched string, show it
+            } 
+			else 
+			{
+                $(this).hide(); // The element has a different vendor value or doesn't contain the string, hide it
+            }
+        });
+    } 
+	else 
+	{
+        $('[VendorName]').show();
+    }
+}
 
+$(document).ready(function() 
+{
+    $('#Search').on('input', function() 
+	{
+        FilterVendor();
+    });
 
-
+    $('#Clear').click(function() 
+	{
+        $('#Search').val(''); // Clear the input field
+        $('[VendorName]').show(); // Show all Vendor elements
+    });
+});
diff --git a/resources/web/guide/24/index.html b/resources/web/guide/24/index.html
@@ -26,7 +26,7 @@
     </div>
 
     <div id="SearchWrapper">
-        <input type="search" id="Search" placeholder="Search" class="trans" tid="t100">
+        <input class="trans" tid="t100" type="search" id="Search" placeholder="Search" spellcheck="false" onchange="FilterVendor()">
     </div>
 </div>
 

diff --git a/resources/web/guide/css/dark.css b/resources/web/guide/css/dark.css
@@ -34,6 +34,7 @@ input[type=search] {
 	border:#9c6da4 1px solid;
 	background-color: #B9B9BC;
 	caret-color : #9c6da4;
+	color: black;
 }
 
 /*-----Button-----*/