Youtube Instant Search: Un plugin pentru JQuery

Youtube Instant Search este un mic plugin jQuery care permite sa cauti video si afiseaza rezultatele în timp real, profitand de Youtube API si de lectura de feed-uri în format JSON. Este usor de adaugat si personalizat. In primul rand, daca nu ai instalata biblioteca jQuery copiaza codul urmator si adaugal inainte de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

daca deja ai instalat codul treci la urmatorul pas, adauga sub el urmatorul script cu plugin:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".search_input").focus();
$(".search_input").keyup(function() {
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&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){
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
var video_frame="<iframe width='500' height='300' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";
$("#result").html(final);
});
} else {
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
//]]>
</script>

Pentru a utiliza plugin este nevoie de doua DIVs: primul este controlul pentru a face cautarea si al doilea celcare va arata rezultatele. Se adauga intr-o postare noua sau unde doresti sa fie vizibil pe blogul tau.
Codul DIVs;

<div id="input_box">
<input type="text" class='search_input' />
</div>
<div id="result"></div>

ultimul pas, adaugare de stil CSS pentru armare script video si se adauga inainte de linia ]]></b:skin>.

<style>
#input_box {
text-align: center;
width:500px;
}
.search_input {
font-size: 20px;
padding: 5px;
text-align: center;
width: 400px;
}
#result {
background-color: #91D0A1;
margin-top:25px;
min-height:380px;
width:500px;
}
#no { text-align: center; }
#title {
font-size: 18px;
height: 40px;
line-height: 1;
padding-bottom: 10px;
text-align: center;
}
#count {
height: 20px;
padding-top: 10px;
text-align: right;
}
</style>

salveaza modificarile si asta este tot, vezi exemplul de mai jos scrie numele unui artist sau melodie si in cateva secunde poti viziona video-ul cautat.

BARA DE CAUTARE

Un comentariu la acest post este binevenit!