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

js/search.js

@@ -1,102 +1,113 @@
+var old_input="";
+var timer = 0;
+
 $(document).ready(function()
-			{
+{
 
-				$("#search").focus();
+	$("#search").focus();
 
-				$('#base').bind("keyup keypress", function(e) {
+	$('#base').bind("keyup keypress", function(e) {
-					var code = e.keyCode || e.which; 
+		var code = e.keyCode || e.which; 
-					if (code  == 13) {               
+		if (code  == 13) {               
-						e.preventDefault();
+			e.preventDefault();
-						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();
+		if(search_input.length < 3){$("#results").html("");}
+		if(event.keyCode == 13){
+		 	search(search_input);
+		}else if(event.keyCode == 27){
+			$("#results").html("");
+		}else{
+			timer=100;
+		}
+
+		
+	});
+
+	setInterval(function(){
+		timer--;
+		if(timer==0){
+			search($(".search_input").val());
+		}
+	}, 1);
+});
+
+
+function search(search_input){
+	
+
+		$("#results").html('');
+		if(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'; 
+
+			$.ajax({
+				type: "GET",
+				url: yt_url,
+				dataType:"jsonp",
+				success: function(response)
 				{
-					var search_input = $(this).val();
+					if(response.data.items)
-					if(search_input.length < 3){
+					{
-						$("#results").html("");
+						$.each(response.data.items, function(i,data)
+						{
+							if(data.duration > 720 && longS == 0){return;}
+							if(data["category"] == "Music" || music == 1){
+								var video_title=encodeURIComponent(data.title).replace(/'/g, "\\\'");
+								var views=data.viewCount;
+								var video_thumb = "http://i.ytimg.com/vi/"+data.id+"/default.jpg";
+								var length = Math.floor(data.duration/60)+":"+(data.duration-Math.floor(data.duration / 60)*60);
+								var finalhtml="<div id='result' class='result' onclick=\"submit('"+data.id+"','"+video_title+"');\">"+
+								"<img src='"+video_thumb+"' class='thumb'>"+
+								"<div id='title'>"+data.title+""+
+								"<div class='result_info'>"+views+" views • "+length+"</div></div></div>";
+								//+data.uploader+" • "+
+								$("#results").append(finalhtml);
+							}
+						});
 					}
-
+					else{ $("#video").html("<div id='no'>No Video</div>");}
-					if(search_input != old_input){
-						old_input=search_input;
-						$("#results").html('');
-						if(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'; 
-
-
-							$.ajax({
-								type: "GET",
-								url: yt_url,
-								dataType:"jsonp",
-								success: function(response)
-								{
-									if(response.data.items)
-									{
-										$.each(response.data.items, function(i,data)
-										{
-											if(data.duration > 720 && longS == 0){return;}
-											if(data["category"] == "Music" || music == 1){
-												var video_title=encodeURIComponent(data.title).replace(/'/g, "\\\'");
-												var views=data.viewCount;
-												var video_thumb = "http://i.ytimg.com/vi/"+data.id+"/default.jpg";
-												var length = Math.floor(data.duration/60)+":"+(data.duration-Math.floor(data.duration / 60)*60);
-												var finalhtml="<div id='result' class='result' onclick=\"submit('"+data.id+"','"+video_title+"');\">"+
-												"<img src='"+video_thumb+"' class='thumb'>"+
-												"<div id='title'>"+data.title+""+
-												"<div class='result_info'>"+views+" views • "+length+"</div></div></div>";
-												//+data.uploader+" • "+
-												$("#results").append(finalhtml);
-											}
-										});
-
-
-									}
-									else
-									{
-										$("#video").html("<div id='no'>No Video</div>");
-									}
-								}
-
-							});
-						}
-					}
-				});
-				}, 300);
-				});
-
-				function submit(id,title){
-					console.log($.ajax({
-						type: "GET",
-						url: "php/change.php",
-						async: false,
-						data: "v="+id+"&n="+title+"&pass="+adminpass,
-						success: function() {
-							console.log("added "+id);
-							document.getElementById("search").value = "";
-							$("#search").addClass("success");
-							$("#results").html('');
-							//updateList();
-						},
-						error: function(){
-							console.log("error in adding");
-							document.getElementById("search").value = "";
-							$("#search").addClass("error");
-							$("#results").html('');
-						}
-					}).responseText);
-
-					$("#search").focus();
-
-					setTimeout(function(){
-						$("#search").removeClass("success");
-						$("#search").removeClass("error");
-					},1500);
-					updateList();
 				}
 
+			});
+		}
+
+}
+
+function submit(id,title){
+	console.log($.ajax({
+		type: "GET",
+		url: "php/change.php",
+		async: false,
+		data: "v="+id+"&n="+title+"&pass="+adminpass,
+		success: function() {
+			console.log("added "+id);
+			document.getElementById("search").value = "";
+			$("#search").addClass("success");
+			$("#results").html('');
+			//updateList();
+		},
+		error: function(){
+			console.log("error in adding");
+			document.getElementById("search").value = "";
+			$("#search").addClass("error");
+			$("#results").html('');
+		}
+	}).responseText);
+
+	$("#search").focus();
+
+	setTimeout(function(){
+		$("#search").removeClass("success");
+		$("#search").removeClass("error");
+	},1500);
+	updateList();
+}
+
 				 // if(reply=="added"){$("#search").removeClass('success'); $("#search").addClass('success');}

static/style.css

@@ -45,14 +45,15 @@ 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;}
 .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;}
 .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;}
 
 .main{width:90%; margin: 0 auto 0 auto;}
 .playlist{width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top;  height: calc(87% - 183px);}
-.lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2);}
+.lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2); }
 .lthumb{height: 70px; margin:0;margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
 .ltitle{ color:#FFF; overflow: hidden; height: 40px; }