Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

PHP → Yahoo мгновенный поиск с Jquery и Ajax

Yahoo мгновенный поиск реализован с Yahoo Search API Boss использованием JQuery и Ajax. Технология очень похожа на мой предыдущий пост (Мгновенный поиск с бинг) просто меняется несколько строк кода. Я чувствую, результаты поиска Yahoo лучше, чем результаты Bing. Поэтому я решил написать статью про яхо. Возможно скора будет и про Google. Используйте данную технологию, чтобы сделать ваши веб проекты ярче.

Yahoo мгновенный поиск с Jquery и Ajax


Демо: смотреть
Скачать: yahoo.rar [1,38 Kb] (cкачиваний: 70)


Сначала нужно создать Yahoo босса поиска чтоб получить идентификатор приложения от Yahoo Developer Network.

javascript Code
Замените APP_ID на ваш.

<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);
// Yahoo Search API
var yahoo_url='http://boss.yahooapis.com/ysearch/web/v1/'+keyword+'?appid=APP_ID&format=json&callback=myData';

$.ajax
({
type: "GET",
url: yahoo_url,
dataType:"jsonp",
success: function(response)
{
$("#result").html('');
if(response.ysearchresponse.resultset_web)
{
$.each(response.ysearchresponse.resultset_web, function(i,data)
{
var title=data.title;
var dis=data.abstract;
var url=data.url;


var final="<div class='webresult'><div class='title'><a href='"+url+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div&gt;";

$("#result").append(final); // Result

});
}
else
{
$("#result").html("<div id='no'>No Results</div>");
}
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
<div id="result">
</div>


Yahoo Boss JSON файл
Ответ от яхо выглядит следующим образом:
myData
({
"ysearchresponse":
{
"responsecode":"200",
"nextpage":"\/ysearch\/web\/v1\/google?format=json&count=10&appid=DFkOm6jIkY58gnDq55gbs97xEKE13w--&start=10&callback=myData",
"totalhits":"362383977",
"deephits":"2380000000","count":"10","start":"0",
"resultset_web":[
{
"abstract":"<b>Google<\/b> allows users to search the Web for images, news, products, video, and other content.",
"clickurl":"http:\/\/lrd.yahooapis.com\/_ylc=X3oDMTQ4a29i-\/SIG=10rsb6kpv\/**http%3A\/\/www.google.com\/",
"date":"2011\/02\/25",
"dispurl":"www.<b>google.com<\/b>",
"size":"25121",
"title":"<b>Google<\/b>",
"url":"http:\/\/www.google.com\/"
},
]}})


CSS
Добавим минимум стилей.
#container
{
margin:0 auto;
width:700px;
}
.search_input
{
border:2px solid #333;
font-size:20px;
padding:5px;
width:350px;
font-family:'Georgia', Times New Roman, Times, serif;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
#input_box
{
text-align:left;
width:640px;
}
#result
{
text-align:left;
}
.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;
}


Наш урок подошол к концу. Мгновенный поиск готов!
Опубликовал dimas_ua, 9-05-2011, 00:00 Комментариев: 0
 (голосов: 4)