diff options
| -rw-r--r-- | gn2/wqflask/templates/gsearch.html | 115 |
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> |