feat: Implement clear search field for global search.

1 files changed, 75 insertions, 40 deletions

diff --git a/gn2/wqflask/templates/gsearch.html b/gn2/wqflask/templates/gsearch.html
index 5bfc51e7..46169738 100644
--- a/gn2/wqflask/templates/gsearch.html
+++ b/gn2/wqflask/templates/gsearch.html
@@ -1,6 +1,6 @@
 <link rel="stylesheet" href="/static/new/css/autocomplete.css" />
 <style TYPE="text/css">
-  .global_search_input{
+.global_search_input{
   padding:9px 8px;
   text-decoration: none;
   border: none;
@@ -25,6 +25,22 @@
   right: 0;
   border-left: none;
   }
+
+  .clear-input-button:hover{
+  cursor: pointer
+  }
+
+  .clear-input-button {
+  position:absolute;
+  right:10px;
+  top:12px;
+  color:#336699;
+  display:none
+  }
+
+  .clear-input--touched:focus + .clear-input-button, .clear-input--touched:hover + .clear-input-button, .clear-input--touched + .clear-input-button:hover {
+  display: inline-flex;
+  }    
 </style>
 <div class="container-fluid"
      style="width: 100%;
@@ -41,23 +57,25 @@
            </select>
            <div class="col-8  autocomplete"
                 style="margin-left: 30px;
-                margin-right: 10px">
+                margin-right: 10px;
+                position:relative">
                 <input autocomplete="off"
-                       class="global_search_input"
+                       class="global_search_input clear-input"
                        id="term"
                        style="width:45vw"
                        type="text"
                        required
                        placeholder="Enter you search term here (ex: cytochrome AND P450)"
+                       style="position:relative"
                        name="terms">
+                       <span style="" title="Clear" class="glyphicon glyphicon-remove clear-input-button"></span>
                        <button type="submit"
-                               class="btn-stc"
+                               class="btn-stc "
                                style="position: absolute;
                                background-color: #336699">
                                <i class="fa fa-search" title="Search " style="color:white;"></i>
                        </button>
            </div>
-           <!-- todo fix text overlap for this;;responsiveness-->
            <span style="padding: 5px;margin-left: 65px;" id="gnqna_home">
              <a href="/gnqna">GNQA Search</a>
            </span>
@@ -78,43 +96,60 @@
 </div>
 <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}"
         type="text/javascript"></script>
-
 	<script src="/static/new/javascript/search_autocomplete.js"></script>
 	<script type="text/javascript">
-          $(document).ready(function() {
-          const urlParams = new  URLSearchParams(window.location.search)
-          let term = urlParams.get("terms")
-          //should web scrap
-          var global_search_hint = [
-          "cytochrome",
-          "cytochrome AND P450",
-          "cytochrome NEAR P450",
-          "cytochrome -P450",
-          "cytochrome NOT P450",
-          "species:human",
-          "group:BXD",
-          "Hs:chr4:9930021 species:mouse",
-          "Hs:chr4:9130000..9980000 species:mouse",
-          "mean:5..7",
-          "mean:7..",
-          "Hs:chr4:9930021",
-          "Hs:chr4:9930021 species:mouse",
-          "Hs:chr4:9130000..9980000 species:mouse",
-          "bx*",
-          "*"
-          ]
-          autocomplete(document.getElementById("term"), global_search_hint);
-          $("#term").keyup(function(event) {
-          if (event.keyCode === 13) {
-          event.preventDefault();
-          $('#globalsearchform').attr('action', "/gsearch").submit();
-          if ($("#term").val().trim() != "") {
-          saveBeforeSubmit($("#term").val().trim())
-          $("#globalsearchform")[0].submit();
-          }
+	  $(document).ready(function() {
+	  const urlParams = new  URLSearchParams(window.location.search)
+	  let term = urlParams.get("terms")
+	  //should web scrap
+	  var global_search_hint = [
+	  "cytochrome",
+	  "cytochrome AND P450",
+	  "cytochrome NEAR P450",
+	  "cytochrome -P450",
+	  "cytochrome NOT P450",
+	  "species:human",
+	  "group:BXD",
+	  "Hs:chr4:9930021 species:mouse",
+	  "Hs:chr4:9130000..9980000 species:mouse",
+	  "mean:5..7",
+	  "mean:7..",
+	  "Hs:chr4:9930021",
+	  "Hs:chr4:9930021 species:mouse",
+	  "Hs:chr4:9130000..9980000 species:mouse",
+	  "bx*",
+	  "*"
+	  ]
+	  autocomplete(document.getElementById("term"), global_search_hint);
+	  $("#term").keyup(function(event) {
+	  if (event.keyCode === 13) {
+	  event.preventDefault();
+	  $('#globalsearchform').attr('action', "/gsearch").submit();
+	  if ($("#term").val().trim() != "") {
+	  saveBeforeSubmit($("#term").val().trim())
+	  $("#globalsearchform")[0].submit();
+	  }
+
+	  }
+	  })
 
-          }
-          })
+	  });
 
-          });
+	  const input = document.querySelector(".clear-input");
+	  const clearButton = document.querySelector(".clear-input-button");
+	  const handleInputChange = e => {
+	  if (e.target.value && !input.classList.contains("clear-input--touched")) {
+	  input.classList.add("clear-input--touched");
+	  } else if (!e.target.value && input.classList.contains("clear-input--touched")) {
+	  input.classList.remove("clear-input--touched");
+	  }
+	  };
+	  const handleButtonClick = e => {
+	  console.log("clicked this button")
+	  input.value = '';
+	  input.focus();
+	  input.classList.remove("clear-input--touched");
+	  };
+	  clearButton.addEventListener("click", handleButtonClick);
+	  input.addEventListener("input", handleInputChange);	 	  
 	</script>