mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Fixed search timer, can search with enter, can press ESC to quit search
This commit is contained in:
Nixo
199
js/search.js
199
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) {
|
||||
var code = e.keyCode || e.which;
|
||||
if (code == 13) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
var old_input="";
|
||||
$(".search_input").focus();
|
||||
setTimeout(function(){
|
||||
$(".search_input").keyup(function()
|
||||
$('#base').bind("keyup keypress", function(e) {
|
||||
var code = e.keyCode || e.which;
|
||||
if (code == 13) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$(".search_input").focus();
|
||||
$(".search_input").keyup(function(event) {
|
||||
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(search_input.length < 3){
|
||||
$("#results").html("");
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
else{ $("#video").html("<div id='no'>No Video</div>");}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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');}
|
||||
|
||||
@@ -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; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user