Caixa de Pesquisa Com Ajax JQuery que Pesquisa de Tudo
Nesta postagem compartilho com vocês que acompanham o DicasHot está caixa de pesquisa inteligente, semelhante a do Google. Ela é capaz de pesquisar por imagens, videos, etc.
Para coloca-lo no blogger... Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código
<style type='text/css'>
# SearchForm {background-color: # 4C5A65; position: relative; margin: 0 0 80px 0; padding: 10px;}
fieldset {border: none}
# SearchInputContainer {width: 420px; height: 34px; background: # fff; float: left; margin-right: 12px}
# S {border: 1px solid # 52e052; color: # 888; background: # f1f1f1 none; text-shadow: 1px 1px 0 # FFF; width: 385px; padding: 0 0 0 25px}
Ícones. {list-style: none; height: 19px; position: relative; margin: 10px 0 0 425px}
Ícones. no-repeat; float: left; height: 19px; text-indent:-9999px; cursor: pointer; margin-right: 5px}
li.web {width: 15px}
li.images {width: 22px; background-position:-18px 0}
li.images.active, li.images: hover {background-position: bottom-18px}
li.news {width: 14px; background-position:-44px 0}
li.news.active, li.news: hover {background-position: bottom-44px}
li.videos {width: 17px; background-position: right 0}
li.videos.active, li.videos: hover {background-position: bottom right}
no-repeat; left: 0; margin: 15px 0 0 5px;}
32CD32 solid #; esboço: 1px solid # 228B22; cursor: pointer}
# SearchInContainer {float: left; margin-top: 5px; width: 400px; text-align: Importante esquerda;}
label{color:#DDD;cursor:pointer;font-size:11px;position:relative;right:-2px;top:-2px;margin-right:10px;white-space:nowrap}
input [type = radio] {cursor: pointer}
. PageContainer {margin-bottom: 50px;}
p.notFound {text-align: center; padding: 0 0 40px}
. WebResult {text-shadow: 1px 1px 0 # 586a75; margin-bottom: 20px}
. WebResult h2 {background-color: # 5D6F7B; font-size: 18px; font-weight: 400; padding: 20px 8px}
. WebResult b h2 {color: # fff}
. WebResult h2 a {color: # eee; border: none}
. WebResult p {line-height: 1.5; padding: 15px 20px; color: # 222;}
. WebResult pb {color: # 000}
. WebResult> a {margin-left: 20px}
. ImageResult {float: left; height: 180px; text-align: center; width: 152px; overflow: hidden; margin: 20px 0 0 20px}
. ImageResult img {display: block; border: none}
. ImageResult A.IMAGEM {border: 2px solid # 333; esboço: 1px solid # 777; display: block; margin: 0 auto 15px}
no-repeat; cursor: pointer; margin: 40px auto}
li.web.active, li.web: hover, # SubmitButton: hover, # mais: hover {background-position: bottom left}
# Page {margin: 0 auto;}
</ Style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script>
<script type="text/javascript">
$ (Document). Ready (function () {
função n (t) {
. t = $ estender ({}, e, t);
t.term = t.term | | $ ("# s") val ().;
if (t.searchSite) {
t.term = "site:" + t.siteURL + "" + t.term
}
"? v = 1.0 & callback =" var i = "http://ajax.googleapis.com/ajax/services/search/" t.type + +;
var s = $ ("# resultsDiv");
$. GetJson (i, {
q: t.term,
RSZ: t.perPage,
start: t.page * t.perPage
}, Function (e) {
var i = e.responseData.results;
. $ ("# Mais") Remove ();
if (i.length) {
var o = $ ("<div>", {
className: "pageContainer"
});
for (var u = 0; u <i.length; u + +) {
o.append (novo r (i [u]) + "")
}
if (t.append!) {
s.empty ()
}
. o.append ('<div class="clear"> </ div>') hide () appendTo (s) fadeIn ("lento")..;
var a = e.responseData.cursor;
if (+ a.estimatedResultCount> (t.page + 1) * t.perPage) {
$ ("<div>", {
id: "mais"
}). AppendTo (s). Clique (function () {
n ({
acrescentar: true,
página: t.page + 1
});
(Este) $. FadeOut ()
})
}
Else {}
s.empty ();
$ ("<p>", {
className: "NotFound",
html: "Nenhum resultado foi encontrado!"
}). Esconder (). AppendTo (s). FadeIn ()
}
})
}
função r (e) {
var t = [];
switch (e.GsearchResultClass) {
case "GwebSearch":
t = ['class="webResult"> <div', '<h2> <a href="', e.unescapedUrl,'" target="_blank">', e.title, "</ a> </ h2> "," <p> ", e.content," </ p> ',' <a href="', e.unescapedUrl,'" target="_blank"> ', e.visibleUrl ", </ a> "," </ div> "];
break;
case "GimageSearch":
estilo t = ['<div class="imageResult">', '<a target = href "_blank" = "', e.unescapedUrl," "title =" ", e.titleNoFormatting '" class = "pic" = "width: 'e.tbWidth", px, altura: "e.tbHeight", px,'> ',' <img src = "", e.tbUrl "," width = "", e.tbWidth '"height =" ", e.tbHeight'" /> </ a> ',' <div class="clear"> </ div> ',' <a href = "', e.originalContextUrl' "target =" _blank "> ', e.visibleUrl," </ a> "," </ div> "];
break;
case "GvideoSearch":
estilo t = ['class="imageResult"> <div', '<a target = "_blank" href = "', e.url," "title =" ", e.titleNoFormatting '" class = "pic" = "width: 150px; height: auto; '>', '<img src="', e.tbUrl,'" width="100%" /> </ a>', '<div class =" clear " > </ div> ',' <a href="', e.originalContextUrl,'" target="_blank"> ', e.publisher, "</ a>", "</ div>"];
break;
case "GnewsSearch":
t = ['class="webResult"> <div', '<h2> <a href="', e.unescapedUrl,'" target="_blank">', e.title, "</ a> </ h2> "," <p> ", e.content," </ p> ',' <a href="', e.unescapedUrl,'" target="_blank"> ', e.publisher, "</ a> "," </ div> "];
pausa
}
this.toString = function () {
retorno t.join ("")
}
}
var e = {
siteurl: "http://dicashot.blogspot.com",
SearchSite: true,
digite: "web",
acrescentar: false,
PerPage: 8,
página: 0
};
var t = $ ("<span>", {
className: "seta"
}) AppendTo ("ul.icons").;
$ ("Ul.icons Li"). Clique (function () {
var n = $ (this);
if (n.hasClass ("ativo")) {
return false
}
n.siblings () removeClass ("ativo").;
n.addClass ("ativo");
t.stop (). animate ({
esquerda: n.position () esquerda,.
MarginLeft: n.width () / 2-4
});
e.type = n.attr ("data-searchType");
$ ("# Mais"). FadeOut ()
});
. $ ("# SiteNameLabel") Anexar ("" + e.siteURL);
$ ("# SearchSite") Clique em ().;
$ ("Li.web") Clique em ().;
. $ ("# S") Foco ();
$ ("# SearchForm"). Submit (function () {
n ();
return false
});
$ ("# SearchSite, # searchWeb"). Change (function () {
e.searchSite = this.id == "SearchSite"
})
})
</ Script>
<div id="page">
<FORM Id="searchForm" method="post">
<fieldset>
id = "s" <input type="text" />
<input type="submit" value="Search" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" verificado />
<label for="searchSite" id="siteNameLabel"> Search </ label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb"> pesquisar na web </ label>
</ Div>
<ul class="icons">
<li local class="web" title="Web Search" data-searchType="web"> </ li>
<li class="images" title="imagem Search" data-searchType="images"> Images </ li>
<li class="news" title="News Search" data-searchType="news"> Notícias </ li>
<li class="videos" title="Video Search" data-searchType="video"> Vídeos </ li>
</ Ul>
</ Fieldset>
</ Form>
</ Div>
<div id="resultsDiv"> </ div>
Ao ter colado o código, substitua a parte destacada de azul no código pela URL do seu site. Tendo feito isto, basta salvar e pronto!!!
