From 23da4fa4123aa329084b48942946f93f939f01f9 Mon Sep 17 00:00:00 2001
From: Alexander_Kabui
Date: Wed, 8 Mar 2023 06:00:41 +0300
Subject: integrate to global search

---
 .../static/new/javascript/search_autocomplete.js   |  2 +-
 wqflask/wqflask/templates/index_page.html          | 56 ++++++++++++++++++++--
 2 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/search_autocomplete.js b/wqflask/wqflask/static/new/javascript/search_autocomplete.js
index a68dc655..04634f9b 100644
--- a/wqflask/wqflask/static/new/javascript/search_autocomplete.js
+++ b/wqflask/wqflask/static/new/javascript/search_autocomplete.js
@@ -149,6 +149,6 @@
             let search = retrieveSearchHistory()
             search.unshift(new_search)
 
-            localStorage.setItem("gn_search_history", JSON.stringify([...new Set(search)]))
+            localStorage.setItem("gn_search_history", JSON.stringify([...new Set(search)].splice(0,8)))
 
         }
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/index_page.html b/wqflask/wqflask/templates/index_page.html
index 09f24d5a..0e120d69 100755
--- a/wqflask/wqflask/templates/index_page.html
+++ b/wqflask/wqflask/templates/index_page.html
@@ -4,6 +4,7 @@
 <!-- UIkit CSS -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.7.4/dist/css/uikit.min.css" />
 <link rel="stylesheet" href="/static/new/css/index_page.css" />
+<link rel="stylesheet" href="/static/new/css/autocomplete.css"/>
 
 <!-- UIkit JS -->
 <script src="https://cdn.jsdelivr.net/npm/uikit@3.7.4/dist/js/uikit.min.js"></script>
@@ -62,7 +63,7 @@
                     <div class="page-header">
                         <h2>Select and Search</h2>
                     </div>
-                    <form method="get" action="/search" target="_blank" name="SEARCHFORM",
+                    <form method="get" action="/search" target="_blank" id="searchform" name="SEARCHFORM",
 			  data-gn_server_url="{{gn_server_url}}">
                         <fieldset>
                             <div style="padding-left: 20px; padding-right: 20px;" class="form-horizontal">
@@ -115,8 +116,8 @@
                                 <div class="form-group">
                                     <label for="or_search" class="col-xs-1 control-label" style="padding-left: 0px; padding-right: 0px; width: 65px !important;">Get Any:</label>
                                     <div class="col-xs-10 controls" style="padding-left: 20px;">
-                                        <div class="col-8">
-                                          <textarea onkeydown="pressed(event)" name="search_terms_or" rows="1" class="form-control search-query" style="resize: vertical; max-width: 550px; width: 450px !important;" id="or_search"></textarea>
+                                        <div class="col-8 autocomplete">
+                                          <textarea id="myInput" onkeydown="pressed(event)" name="search_terms_or" rows="1" class="form-control search-query" style="resize: vertical; max-width: 550px; width: 450px !important;" id="or_search"></textarea>
                                         </div>
                                     </div>
                                 </div>
@@ -291,8 +292,30 @@
 {%endblock%}
 
 {% block js %}
+
+    
+    <script src="/static/new/javascript/search_autocomplete.js"></script>
     <script src="/static/new/javascript/dataset_select_menu_orig.js"></script>
 
+
+    <script type="text/javascript">
+        
+
+        let form  = document.getElementById("searchform")
+
+
+$(document).on('submit', '#searchform', function(event){
+
+    event.preventDefault()
+     let  user_search = $("#myInput").val().trim();
+     if (user_search!=""){
+     saveBeforeSubmit(user_search)
+     $( "#searchform" )[0].submit();   
+     }
+
+   });
+    </script>
+
     <script>
         function pressed(e) {
             // Has the enter key been pressed?
@@ -300,11 +323,37 @@
                 e.preventDefault();
                 // If enter key has been pressed and the search fields are non-empty
                 // manually submit the <form>
+
                 if( event.target.value.trim() != "" ) {
+                    saveBeforeSubmit(event.target.value.trim())
                     document.forms[1].submit();
                 }
             }
         }
+
+        let x = document.getElementById("myInput");
+
+        var hints = [
+            "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("myInput"), hints);
+
     </script>
 
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='javascript-twitter-post-fetcher/js/twitterFetcher_min.js') }}"></script>
@@ -323,5 +372,4 @@
       twitterFetcher.fetch(configProfile);
     </script>
 
-
 {% endblock %}
-- 
cgit v1.2.3