add autocomplete on search bar for usability

bazaar/static/css/project.css

@@ -7354,3 +7354,37 @@ samp {
   width: 100%;
   overflow-x: auto;
   white-space: nowrap; }
+
+.autocomplete {
+  position: relative;
+  display: inline-block;
+  flex: 1 1 auto;
+  width: 1%; }
+
+.autocomplete .form-control {
+  width: 100%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.autocomplete-items {
+  text-align: left;
+  position: absolute;
+  border: 1px solid #d4d4d4;
+  border-top: none;
+  z-index: 99;
+  top: 100%;
+  left: 0;
+  right: 0; }
+
+.autocomplete-items div {
+  padding: 10px;
+  cursor: pointer;
+  background-color: #fff;
+  border-bottom: 1px solid #d4d4d4; }
+
+.autocomplete-items div:hover {
+  background-color: #e9e9e9; }
+
+.autocomplete-active {
+  background-color: #cbb4f6 !important;
+  color: #ffffff; }

bazaar/static/sass/project.scss

@@ -127,4 +127,44 @@ samp {
     width: 100%;
     overflow-x: auto;
     white-space: nowrap;
+}
+
+.autocomplete {
+  position: relative;
+  display: inline-block;
+  flex: 1 1 auto;
+  width: 1%;
+}
+
+.autocomplete .form-control {
+  width: 100%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.autocomplete-items {
+  text-align: left; 
+  position: absolute;
+  border: 1px solid #d4d4d4;
+  border-top: none;
+  z-index: 99;
+  top: 100%;
+  left: 0;
+  right: 0;
+}
+
+.autocomplete-items div {
+  padding: 10px;
+  cursor: pointer;
+  background-color: #fff;
+  border-bottom: 1px solid #d4d4d4;
+}
+
+.autocomplete-items div:hover {
+  background-color: #e9e9e9;
+}
+
+.autocomplete-active {
+  background-color: #d1c0ee !important;
+  color: #ffffff;
 }

bazaar/templates/front/index.html

@@ -46,9 +46,13 @@ <h3 class=" text-white">Mobile threat intelligence for the masses</h3>
                 <form class="form-horizontal text-center" method="get">
                   <div class="input-group">
                     {% if q %}
-                      <input type="text" name="q" class="form-control" required value="{{ q }}">
+                    <div class="autocomplete">
+                      <input type="text" id="search_query" name="q" class="form-control" required value="{{ q }}">
+                    </div>
                     {% else %}
-                      <input type="text" name="q" class="form-control" required placeholder="Your query">
+                    <div class="autocomplete">
+                      <input type="text" id="search_query" name="q" class="form-control" required placeholder="Your query">
+                    </div>
                     {% endif %}
                     <div class="input-group-append">
                       <button class="btn btn-primary" type="submit"><i class="nf nf-oct-search"></i></button>
@@ -168,4 +172,111 @@ <h2>No results</h2>
       </div>
     {% endif %}
   </div>
+
+<script>
+
+function autocomplete(inp, arr) {
+
+  var currentFocus;
+  inp.addEventListener("input", function(e) {
+      var a, b, i, val = this.value;
+
+      closeAllLists();
+
+      if (!val) { return false;}
+        currentFocus = -1;
+
+      a = document.createElement("DIV");
+      a.setAttribute("id", this.id + "autocomplete-list");
+      a.setAttribute("class", "autocomplete-items");
+      this.parentNode.appendChild(a);
+
+      for (i = 0; i < arr.length; i++) {
+        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
+          b = document.createElement("DIV");
+          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
+          b.innerHTML += arr[i].substr(val.length);
+          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
+
+          b.addEventListener("click", function(e) {
+              inp.value = this.getElementsByTagName("input")[0].value;
+              closeAllLists();
+          });
+          a.appendChild(b);
+        }
+      }
+  });
+
+  inp.addEventListener("keydown", function(e) {
+
+    var x = document.getElementById(this.id + "autocomplete-list");
+
+    if (x) x = x.getElementsByTagName("div");
+
+    if (e.keyCode == 40) { // down
+        currentFocus++;
+        addActive(x);
+      } else if (e.keyCode == 38) { // up
+        currentFocus--;
+        addActive(x);
+      } else if (e.keyCode == 13) { // enter
+        e.preventDefault();
+        if (currentFocus > -1) {
+          if (x) x[currentFocus].click();
+        }
+      }
+  });
+
+  function addActive(x) {
+
+    if (!x) return false;
+    removeActive(x);
+    if (currentFocus >= x.length) currentFocus = 0;
+    if (currentFocus < 0) currentFocus = (x.length - 1);
+    x[currentFocus].classList.add("autocomplete-active");
+  }
+
+  function removeActive(x) {
+    for (var i = 0; i < x.length; i++) {
+      x[i].classList.remove("autocomplete-active");
+    }
+  }
+
+  function closeAllLists(elmnt) {
+    var x = document.getElementsByClassName("autocomplete-items");
+    for (var i = 0; i < x.length; i++) {
+      if (elmnt != x[i] && elmnt != inp) {
+      x[i].parentNode.removeChild(x[i]);
+    }
+  }
+}
+
+  document.addEventListener("click", function (e) {
+    closeAllLists(e.target);
+  });
+}
+
+var search_terms = [
+  "md5: ",
+  "sha1: ",
+  "sha256: ",
+  "uaid: ",
+  "permissions: ",
+  "java_classes: ",
+  "features: ",
+  "handle: ",
+  "app_name: ",
+  "domains: ",
+  "cert_md5: ",
+  "cert_sha1: ",
+  "cert_sha256: ",
+  "cert_issuer: ",
+  "vt.malicious: ",
+  "AND ",
+  "OR ",
+];
+
+autocomplete(document.getElementById("search_query"), search_terms);
+
+</script>
 {% endblock whole_content %}

requirements/base.txt

@@ -29,7 +29,7 @@ django-q2==1.9.0
 elasticsearch==8.19.3
 elasticsearch-dsl==8.15.4
 #quark-engine==26.6.1
-quark-engine @ git+https://github.com/trpyn/quark-engine.git
+quark-engine @ git+https://github.com/ev-flow/quark-engine.git
 androguard==4.1.4
 django-minio-storage==0.5.9
 dhash==1.4
@@ -38,7 +38,7 @@ google-play-scraper==1.2.7
 gpapi==0.4.4
 requests==2.33.0
 dexofuzzy==2.0.0
-AndroCFG @ git+https://github.com/U039b/AndroCFG.git
+AndroCFG @ git+https://github.com/Pithus/AndroCFG.git
 vt-py==0.22.0
 scipy==1.17.0
 numpy==2.4.1
@@ -59,4 +59,4 @@ apkid==3.1.0
 yara-python-dex==1.0.7
 
 # MISP
-pymisp==2.5
+pymisp==2.5