diff options
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/search_autocomplete.js | 2 | ||||
| -rwxr-xr-x | 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 %} |