chg: [website] Added a simple datalist refresh system in JavaScript f…

…or the freetext input field.

website/web/api/v1/base.py

@@ -192,7 +192,11 @@ def get(
 @default_ns.doc(description="Get the known vendors")
 class Vendors(Resource):  # type: ignore[misc]
     def get(self) -> list[str]:
-        return list(vulnerabilitylookup.get_vendors())
+        vendor = request.args.get("vendor", "").lower()
+        vendors = list(vulnerabilitylookup.get_vendors())
+        if vendor and len(vendor) >= 1:
+            vendors = [elem for elem in vendors if vendor in elem]
+        return vendors
 
 
 @api_ns.route("/browse/<string:vendor>")

website/web/templates/search.html

@@ -14,7 +14,8 @@
 {%endif%}
 <form class="row g-3" role="form" method="post" action="search" enctype="multipart/form-data">
   <div class="col-auto">
-    <input type="text" class="form-control" id="freetext_search" placeholder="What are you looking for?" name="freetext_search" autofocus>
+    <input type="text" class="form-control" id="freetext_search" placeholder="What are you looking for?" name="freetext_search" list="vendors_list" autofocus>
+    <datalist id="vendors_list"></datalist>
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
   </div>
   <div class="col-auto">
@@ -154,6 +155,19 @@ <h5>All the vulnerabilites related to {{vendor}} - {{product}}</h5>
     Array.prototype.forEach.call(jsonContainers, function(jsonContainer) {
       jsonContainer.innerHTML = prettyPrintJson.toHtml(JSON.parse(jsonContainer.innerText));
     });
+
+    document.getElementById("freetext_search").oninput = function(event) {
+      var text = document.getElementById("freetext_search").value;
+      fetch("{{ url_for('apiv1.api_vendors') }}?vendor="+text)
+      .then(response => response.json())
+      .then(vendors => {
+        var options = '';
+        vendors.map(function(vendor){
+          options += '<option value="'+ vendor +'" >';
+        })
+        document.getElementById('vendors_list').innerHTML = options;
+      });
+    }
   });
 </script>
 {% endblock %}