Fixed search timer, can search with enter, can press ESC to quit search

This commit is contained in:
Nixo
2014-10-30 23:17:40 +01:00
parent 10597d7b5b
commit e7ca421c3d
2 changed files with 108 additions and 96 deletions

View File

@@ -1,3 +1,6 @@
var old_input="";
var timer = 0;
$(document).ready(function() $(document).ready(function()
{ {
@@ -10,25 +13,40 @@ $(document).ready(function()
return false; return false;
} }
}); });
var old_input="";
$(".search_input").focus(); $(".search_input").focus();
setTimeout(function(){ $(".search_input").keyup(function(event) {
$(".search_input").keyup(function()
{
var search_input = $(this).val(); var search_input = $(this).val();
if(search_input.length < 3){ if(search_input.length < 3){$("#results").html("");}
if(event.keyCode == 13){
search(search_input);
}else if(event.keyCode == 27){
$("#results").html(""); $("#results").html("");
}else{
timer=100;
} }
if(search_input != old_input){
old_input=search_input; });
setInterval(function(){
timer--;
if(timer==0){
search($(".search_input").val());
}
}, 1);
});
function search(search_input){
$("#results").html(''); $("#results").html('');
if(search_input != ""){ if(search_input != ""){
var keyword= encodeURIComponent(search_input); var keyword= encodeURIComponent(search_input);
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&orderby=relevance&max-results=25&v=2&alt=jsonc'; var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&orderby=relevance&max-results=25&v=2&alt=jsonc';
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: yt_url, url: yt_url,
@@ -53,21 +71,14 @@ $(document).ready(function()
$("#results").append(finalhtml); $("#results").append(finalhtml);
} }
}); });
}
else
{
$("#video").html("<div id='no'>No Video</div>");
} }
else{ $("#video").html("<div id='no'>No Video</div>");}
} }
}); });
} }
} }
});
}, 300);
});
function submit(id,title){ function submit(id,title){
console.log($.ajax({ console.log($.ajax({

View File

@@ -45,7 +45,8 @@ body{background:#000; margin:0; }
#results{position:absolute; background-color: white; font-size: 14px; width:90%; border-radius:3px; margin-left: 5%; margin-top:-20px; z-index: 2; font-family: sans-serif;} #results{position:absolute; background-color: white; font-size: 14px; width:90%; border-radius:3px; margin-left: 5%; margin-top:-20px; z-index: 2; font-family: sans-serif;}
.result{border-bottom: solid 1px #E5E5E5; text-align: left; height: 70px; cursor: pointer; border-radius: 3px;} .result{border-bottom: solid 1px #E5E5E5; text-align: left; height: 70px; cursor: pointer; border-radius: 3px;}
.result:hover, .result:hover #title, .result:hover .result_info {background-color: rgba(90, 90, 90, 1); color:white !important;} .result:hover, .result:hover #title, .result:hover .result_info {color:white !important;}
.result:hover{background-color: rgba(0, 0, 0, 0.4);}
#title{ padding-left: 9%; padding-top: 16px; max-width: 76%; color: #000000; height: 36px;} #title{ padding-left: 9%; padding-top: 16px; max-width: 76%; color: #000000; height: 36px;}
.result_info{color:#888; font-size: 12px; /* float:right; */padding-top: 6px;} .result_info{color:#888; font-size: 12px; /* float:right; */padding-top: 6px;}
.thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;} .thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;}