The instant search feature has massively changed the web in past couple of weeks. I had developed real-time Youtube instant search with Jquery and Ajax. It is very simple like my previous posts, just reading the Youtube API JSON file with Jquery.
Javascript Code
$(".search_input").keyup(function(){})- search_input is the class name of input tag. $(this).val() - calling the input search box value. The encodeURIComponent() function encodes special characters (More infomation).
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Youtube API
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;
// IFRAME Embed for YouTube
var video_frame="<iframe width='640' height='385' 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); // Result
});
}
else
{
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
<div id="result">
</div>Youtube JSON file
JSON file keyword : Twitter Oauth askgif
{
"apiVersion":"2.0",
"data":
{
"updated":"2010-09-29T12:44:49.913Z",
"totalItems":2,
"startIndex":1,
"itemsPerPage":1,
"items":[{
"id":"yhrbmUbF0IE",
"uploaded":"2010-02-23T18:21:03.000Z",
"updated":"2010-09-21T01:50:37.000Z",
"uploader":"askgif",
"category":"Tech",
"title":"Twitter Oauth Connect",
"description":"labs.askgif application to twitter oauth connect using PHP",
"tags":["PHP","twitter","Oauth"],
"thumbnail":
{
"sqDefault":"http://i.ytimg.com/vi/yhrbmUbF0IE/default.jpg",
"hqDefault":"http://i.ytimg.com/vi/yhrbmUbF0IE/hqdefault.jpg"
},
"player":
{
"default":"http://www.youtube.com/watch?v\u003dyhrbmUbF0IE&feature\u003dyoutube_gdata_player",
"mobile":"http://m.youtube.com/details?v\u003dyhrbmUbF0IE"},
"content":
{
"1":"rtsp://v6.cache2.c.youtube.cb3MM/0/0/0/video.3gp",
"5":"http://www.youtube.com/v/yhrbmUdata",
"6":"rtsp://v6.cache7.c.youtube.com/.3gp"
},
"duration":93,
"rating":3.0,
"likeCount":"1",
"ratingCount":2,
"viewCount":2481,
"favoriteCount":1,
"commentCount":1,
"accessControl":
{
"syndicate":"allowed",
"commentVote":"allowed",
"rate":"allowed",
"list":"allowed",
"comment":"allowed",
"embed":"allowed",
"videoRespond":"moderated"
}}
]
}
}CSS
body
{
background-color:#86c9ef;
color:#000;
font-family:'Georgia', Times New Roman, Times, serif
}
#result
{
background-color:#000;
margin-top:25px;
min-height:400px;
width:640px;
border:solid 10px #ffffff;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
#no
{
padding:30px;
font-size:24px;
color:#fff;
}
#title
{
background-color:#fff;
font-size:26px;
text-align:left;
padding-bottom:8px;
}
#count
{
background-color:#fff;
text-align:left;
padding-top:8px;
}
