Commit bb2b3f46 authored by Kunal Sarkhel's avatar Kunal Sarkhel

Add real-time search with debouncing

parent fda023c8
...@@ -8,10 +8,11 @@ ...@@ -8,10 +8,11 @@
<title>GMU Keyserver</title> <title>GMU Keyserver</title>
<link href="http://bootswatch.com/lumen/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="https://bootswatch.com/lumen/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/cowboy/jquery-throttle-debounce/master/jquery.ba-throttle-debounce.min.js"></script>
<link rel="icon" href="img/favicon.ico" type="image/x-icon"/> <link rel="icon" href="img/favicon.ico" type="image/x-icon"/>
...@@ -35,15 +36,15 @@ ...@@ -35,15 +36,15 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8 col-lg-offset-2"> <div class="col-lg-8 col-lg-offset-2">
<form action="/pks/lookup" method="get" class="form" role="form"> <form id="lookup" action="/pks/lookup" method="get" class="form" role="form" autocomplete="off">
<div class="control-group"> <div class="control-group">
<div class="controls"> <div class="controls">
<input name="search" class="form-control" type="text" style="font-size: 1.5em; line-height: 1.5em; height: 2em;"/> <input name="search" id="search" class="form-control" type="text" style="font-size: 1.5em; line-height: 1.5em; height: 2em;"/>
</div> </div>
</div> </div>
<div class="control-group text-center" style="margin-top: 0.5em;"> <div class="control-group text-center" style="margin-top: 0.5em;">
<div class="controls"> <div class="controls">
<button type="submit" class="btn btn-primary">Search Key</button> <button class="btn btn-primary" onClick="searchSubmit();">Search Key</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Submit Key</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Submit Key</button>
</div> </div>
</div> </div>
...@@ -75,10 +76,14 @@ ...@@ -75,10 +76,14 @@
</label> </label>
</div> </div>
</div> </div>
<div> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="row">
<div id="result" class="col-lg-8 col-lg-offset-2">
</div>
</div>
</div> </div>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...@@ -100,7 +105,7 @@ ...@@ -100,7 +105,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onClick="$('#keySubmitForm').submit();">Submit Key</button> <button type="button" class="btn btn-primary" onClick="submitHandler();">Submit Key</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -112,5 +117,32 @@ ...@@ -112,5 +117,32 @@
</div> </div>
</div> </div>
</div> </div>
<script>
function submitHandler() {
$('#keySubmitForm').submit();
}
function searchSubmit() {
console.log($("#search").val());
search_key = $("#search").val().replace(" ", "+");
url = "http://pgp.gmu.edu/pks/lookup?search="+search_key+"&fingerprint=on&op=index";
console.log(url);
$("#result").html('<div style="text-align: center;"><i class="fa fa-spinner fa-spin" style="font-size: 24px; text-align: center;"></i></div>');
document.location.hash = "q="+search_key;
$.get(url, function(data) {
$("#result").html(data);
});
console.log("What");
}
$("#lookup").submit(function(event) {
searchSubmit();
event.preventDefault();
});
/*
$("#lookup").keypress(function(event) {
searchSubmit();
});
*/
$("#lookup").keyup($.debounce(250, searchSubmit));
</script>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment