JSFiddle - React, Tailwind, and code Playground

by bkvirendra

HTML

<body> 
<div id="container"> 
<div id="input_box"> 
<a href="http://teckzone.in/fbinstant/"><img src="facebook_instant_logo.jpg" /></a><br/> 
<input type="text" class='search_input'  /><br/><br/> 
</div> 
<div id="result"> 
</div> 
</div> 
</body>

CSS

body {
background-color:#E7EBF2;
color:#000;
font-family:Tahoma,Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#container
{
margin:0 auto;
width:900px;
}
.search_input
{
font:bold 16px Tahoma;
color:#666;
border:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
background:#ffffff !important;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#efefef));
background-image:-moz-linear-gradient(top, #fff, #fff);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#efefef));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#efefef);
height:1.9331em;
padding:0 0.5em;
cursor:normal;
width:650px;
white-space:nowrap;
overflow:visible; /* fixes width in IE7 */
outline:0 none /* removes focus outline in IE */
input::-moz-focus-inner {border:none} /* removes focus outline in FF */
-moz-border-radius: 0.1em;
border-radius: 0.1em;
-moz-box-shadow: 0 0 0.1em 0 #c0c0c0;
-webkit-box-shadow: 0 0 0.1em 0 #c0c0c0;
box-shadow: 0 0 0.1em 0 #c0c0c0;
}
#input_box
{
text-align:left;
width:740px;
}
#result
{
text-align:left;
}
#no
{
padding:30px;
font-size:36px;
color:#000000;
}
.title
{
color:#006699;
font-size:16px;
padding-bottom:5px;
}
.title a
{
color:#cc0000;
text-decoration:none;
}
.desc
{
color:#333;
padding-bottom:5px;
}
.url
{
 color:#006600;
}
.webresult
{
margin-top:10px;
padding-bottom:10px;
padding-left:5px;
border-bottom:1px dashed #dedede;
}

JavaScript

$(document).ready(function(){
$(".search_input").focus();
$(".search_input").keyup(function(){
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
var yt_url='http://graph.facebook.com/search?q='+keyword+'&type=post'; 
$.ajax({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response){
$("#result").html('');
if(response.data.length){
$.each(response.data, function(i,data){
var profile=data.from.id;
var title=data.from.name;
var dis=data.message;
var url=data.id;
var mstory=data.story;
if (dis.length) {
   var final="<div class='webresult'><div class='title'><a href="+profile+">"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div>";
} else if (mstory) {
   var final="<div class='webresult'><div class='title'><a href="+profile+">"+title+"</a></div><div class='desc'>"+mstory+"</div><div class='url'>"+url+"</div></div>";
}
$("#result").append(final);
});
} else {
$("#result").html("<div id='no'>No results</div>");
} 
}  
}); }); });