show user history on global search

author: Alexander_Kabui 2023-03-01 03:27:13 +0300
committer: Alexander_Kabui 2023-03-01 03:27:13 +0300
commit: 1db857be07f76fe734a0bbefe79e2ba9a964dba2 (patch)
tree: 6a3f5de681cec018c6839b2b32c3e76a6437c4d7
parent: 0ab80b42d322795eeefa32fac557bb1498d9cd5e (diff)
download: genenetwork2-1db857be07f76fe734a0bbefe79e2ba9a964dba2.tar.gz
1 files changed, 297 insertions, 0 deletions
diff --git a/wqflask/wqflask/templates/search_history.html b/wqflask/wqflask/templates/search_history.html
new file mode 100644
index 00000000..11586c0a
--- /dev/null
+++ b/wqflask/wqflask/templates/search_history.html
@@ -0,0 +1,297 @@
+<<!DOCTYPE html>
+    <html>
+
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <link rel="stylesheet" href="">
+    </head>
+    <style type="text/css">
+    .autocomplete {
+        /*the container must be positioned relative:*/
+        position: relative;
+        display: inline-block;
+
+        /*width: 30vw; */
+    }
+
+    .search_box {
+
+        background: #Ececec;
+
+        width: 50vw;
+        /*padding:15px 20px; */
+        border-radius: 50%;
+        border: 1px solid grey;
+        /* text-align: center; */
+
+        font-size: 18px;
+
+        flex-grow: 2;
+        border: none;
+        border-radius: 50px;
+
+        height: 40px;
+
+        padding: 2px 5px;
+
+        padding-left: 40px;
+
+
+
+
+    }
+
+    .search_box:focus {
+        border: 1px solid grey;
+    }
+
+
+
+    .hint-items {
+
+        position: absolute;
+
+        border: 1px solid #d4d4d4;
+
+        z-index: 99;
+        /*position the autocomplete items to be the same width as the container:*/
+        top: 100%;
+        left: 0;
+        right: 0;
+
+        background: white;
+
+        padding: 10px;
+
+        border-radius: 40px;
+
+        padding: 10px 20px;
+
+        /*border-bottom: none; */
+
+
+    }
+
+    .search_box_hint {
+        position: absolute;
+
+        border: 1px solid #d4d4d4;
+        border-bottom: none;
+        border-top: none;
+        z-index: 99;
+        /*position the autocomplete items to be the same width as the container:*/
+        top: 100%;
+        left: 0;
+        right: 0;
+
+        background: red;
+
+        padding: 10px;
+
+        border-radius: 40px;
+
+
+    }
+
+
+    .hint_area {
+        height: px;
+
+        width: 50vw;
+
+        border-radius: 40px;
+        background: red;
+    }
+
+
+
+    .search_box_hint_input {
+        display: block;
+
+        color: white;
+
+        width: 100%;
+
+        padding: 10px 20px;
+
+        /*border-radius:20px;*/
+        border: none;
+
+        color: #000;
+
+        font-weight: bold;
+
+        font-size: 18px;
+
+    }
+
+    .search_box_hint_input {
+        border: none;
+        background-color: transparent;
+
+        text-align: inherit;
+
+        color: #101691;
+    }
+
+    .search_box_hint_input:focus,
+    .search_box_hint_input:active {
+        box-shadow: none !important;
+        -moz-box-shadow: none !important;
+        -webkit-box-shadow: none !important;
+        outline: none !important;
+    }
+
+    .search_box_hint_input:hover {
+        background-color: #dedad9;
+    }
+    </style>
+
+    <body>
+        <div>
+            <div>
+                <h3>
+                    this is the title
+                </h3>
+            </div>
+            <form id="form_1">
+                <div class="autocomplete" id="autocompleteForm">
+                    <input class="search_box" id="search_box_input" type="text" name="" placeholder="search value" autocomplete="off" value="">
+                </div>
+            </form>
+        </div>
+        <script type="text/javascript">
+        let cache_countries;
+
+        const search = document.getElementById("search_box_input");
+
+        const form = document.getElementById("autocompleteForm");
+
+        search.addEventListener("focus", function(event) {
+
+            console.log("hello there")
+
+
+            a = document.createElement("DIV")
+
+            a.setAttribute("class", "hint-items");
+
+
+            this.parentNode.appendChild(a)
+
+            cache_countries = retrieveSearchHistory()
+
+
+            for (let i = 0; i < cache_countries.length; i++) {
+
+                console.log(i)
+                var textfieldSelector = document.createElement("input");
+
+                textfieldSelector.type = "button";
+
+                textfieldSelector.value = `${cache_countries[i]}`;
+
+                //textfieldSelector.classList.add("search_box_hint");
+
+                textfieldSelector.classList.add("search_box_hint_input");
+
+                textfieldSelector.addEventListener("click", function(event) {
+
+                    console.log("clicked this country")
+
+                    search.value = cache_countries[i] // remove child element
+
+                    let parent = document.getElementById("search_box_input").parentNode
+
+                    parent.removeChild(this.parentNode)
+
+
+                })
+
+                a.appendChild(textfieldSelector);
+            }
+
+            document.addEventListener('click', (event) => {
+                if (!event.target.matches('#autocompleteForm, #autocompleteForm *')) {
+
+
+                    const collection = document.getElementsByClassName("hint-items");
+
+                    console.log(collection)
+
+                    if (collection.length > 0) {
+                        let parent = document.getElementById("search_box_input").parentNode
+
+                        parent.removeChild(collection[0])
+                    } else {
+
+                        //ju
+                    }
+
+                }
+            })
+
+        })
+
+        formElement = document.getElementById("form_1");
+
+        function setPlaceHolderValue() {
+            document.getElementById("search_box_input").
+        }
+
+        function onFocusHandler(event) {
+
+        }
+
+        function searchHistoryClick(event) {
+
+        }
+
+        function removeSearchHintOnclick(element) {
+
+            parentELement = document.createElement("DIV")
+            parentELement.setAttribute("class", "hint-items");
+            element.parentNode.appendChild(a)
+            searchHistory = retrieveSearchHistory()
+        }
+
+        function saveBeforeSubmit(form) {
+
+            form.addEventListener("keydown", (event) => {
+
+                if (event.keyCode === 13) {
+                    event.preventDefault()
+                    if (search.value) {
+                        dumpSearch(search.value)
+                        form.submit()
+                    }
+                    return;
+                }
+            })
+
+        }
+        saveBeforeSubmit(formElement)
+
+        function retrieveSearchHistory() {
+            let results = JSON.parse(localStorage.getItem("gn_search_history"))
+            return results ? results : []
+        }
+
+        function dumpSearch(search_item) {
+
+            let currentSearch = retrieveSearchHistory()
+            currentSearch.unshift(search_item)
+
+            console.log(currentSearch)
+
+            localStorage.setItem("gn_search_history", JSON.stringify(currentSearch.slice(0, 5)));
+
+            return currentSearch
+
+        }
+        </script>
+    </body>
+
+    </html>
+\ No newline at end of file
author	Alexander_Kabui	2023-03-01 03:27:13 +0300
committer	Alexander_Kabui	2023-03-01 03:27:13 +0300
commit	1db857be07f76fe734a0bbefe79e2ba9a964dba2 (patch)
tree	6a3f5de681cec018c6839b2b32c3e76a6437c4d7
parent	0ab80b42d322795eeefa32fac557bb1498d9cd5e (diff)
download	genenetwork2-1db857be07f76fe734a0bbefe79e2ba9a964dba2.tar.gz