fix:Enter key in search field. (#769)

* enable search on keypress enter

* add default value for search field

* forward search queries

1 files changed, 47 insertions, 2 deletions

diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index 7145cd7a..4b1237f5 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -28,6 +28,10 @@
     {% endblock %}
 
     <style>
+
+        .form-rounded {
+            border-radius: 1rem;
+        }
         table.dataTable thead .sorting_asc {
             background-image: url({{ url_for("js", filename="DataTables/images/sort_asc_disabled.png") }});
         }
@@ -135,14 +139,19 @@
 
     <div class="container-fluid" style="width: 100%; min-width: 650px; position: relative; background-color: #d5d5d5; height: 84px;">
 
-        <form method="get" action="/gsearch">
+        <form method="get" action="/gsearch" id="searchform">
             <div class="row" style="width: 100%; position: absolute; bottom: 0; top: 30px;">
+
+                <!--
                 <button id="btsearch" class="btn btn-primary" style="margin-left: 20px;"><span class="glyphicon glyphicon-search"></span> Search All</button>
+
+             use enter key to submit fomr -->
                 <select style="width: 160px; margin-top: 15px; margin-left: 10px;" name="type">
                     <option value="gene">Genes / Molecules</option>
                     <option value="phenotype" {% if type=="phenotype" %}selected{% endif %}>Phenotypes</option>
                 </select>
-                <input style="width: 50%; margin-top: 15px; margin-left: 10px;" type="text" name="terms" required>
+
+                <input id="term"  class="form-rounded" style="width: 40vw; margin-top: 15px; margin-left: 10px;" type="text" name="terms" required placeholder="enter you search term here">
             </div>
         </form>
     </div>
@@ -247,6 +256,7 @@
       <!--</div>-->
     </div>
 
+
     <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
     <script src="{{ url_for('js', filename='bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
     <script>
@@ -259,6 +269,41 @@
               }
             })
     </script>
+
+
+    <script type="text/javascript">
+
+
+
+$(document).ready(function() {
+
+
+    const urlParams = new  URLSearchParams(window.location.search)
+
+   let term = "cytochrome NOT P450"
+
+   if (urlParams.get("search_terms_or")){
+    term =  urlParams.get("search_terms_or")
+   }
+
+   else if (urlParams.get("terms")){
+    term = urlParams.get("terms")
+   }
+
+    $("#term").val(term);
+    $("#term").keyup(function(event) {
+  if (event.keyCode === 13) {
+    event.preventDefault();
+    $('#searchform').attr('action', "/gsearch").submit();
+    }
+    });    
+
+
+});
+
+
+    </script>
+
     <script src="{{ url_for('js', filename='jquery-cookie/jquery.cookie.js') }}" type="text/javascript"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <!-- <script src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}" type="text/javascript"></script> -->