Делаем поиск в реальном времени с помощью Yahoo

Делаем поиск в реальном времени с помощью Yahoo

Поиск в реальном времени мы будем делать с помощью Api Yahoo и использованием jQuery и Ajax соответственно. В целом подобная технология много где используется и довольно простая в плане реализации. Использоваться мы решили Yahoo потому-что, про Google и Яндекс в интернете много чего написано. Вполне вероятно, что в ближайшем будущем я попробую написать статью и про Яндекс и Google, если попросите в комментариях. Данная функционал добавит вашему сайту больше динамичности и удобства для посетителей.


Итак, для начало нам нужно будет зарегистрироваться и получить идентификатор в сети разработчиков Yahoo.

Потом мы вставляем этот код на странице и заменяем в нем значение APP_ID на то, которое мы получили в сети разработчиков Yahoo.



// HTML code

Теперь перейдем к файлу 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":"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.google.com< \/b>",
"size":"25121",
"title":"Google< \/b>",
"url":"http:\/\/www.google.com\/"
},
]}})

Само собой без дополнительный стилей нам не обойтись и поэтому добавим их:

#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;
}

Вот и все. Конец. Скрипт ставится очень легко и быстро, а самое главное то, что он будет полностью совместим с новая поисковой выдачей острова Яндекса. Вот такие вот сюрпризы иногда нам дарит Яндекс :)

Скачать скрипт | Посмотреть демо