Olá pessoal, meu nome é Mauricio Junior. Escrevo este artigo para mostrar a todos como colocar um sistema de busca eficiente em seu site, com paginação e interface bonita mesmo que não tenha banco de dados, arquivos indexáveis e um sistema de busca no site. Você deve estar pensando: - mas como colocar um sistema de busca em meu site?
Estive navegando na internet e acabei vendo esse tipo de opção junto ao outro site cujo gostei de como foi feito. Portanto, comecei a pesquisar sobre o assunto e sobre a ferramenta, pois com algumas linhas de código o mesmo é colocado em seu site e busca todos os dados que existem nele automaticamente. Existe a paginação que existe na busca e o mais importante, sem sair da sua primeira página em layout.
Resumindo, precisa-se apenas de alguns campos html e duas funções em javascript para o devido funcionamento. Esta busca pode ser colocado em qualquer site, mesmo se o mesmo for apenas html. Basta atribuir o site e tamanho da tela que irá aparecer depois que o usuário fizer alguma busca.
No decorrer do artigo, mostrarei o código normalmente. Utilizarei o CallBack via javascript cujo o sistema disponibiliza para todos.
Primeiro Botão
Onde digita os dados.
|
<input id="WLSearchBoxInput" size="11" style="background-position: right 50px; background-image: url('http://search.live.com/s/siteowner/searchbox_background.png'); width: 161px; background-repeat: no-repeat; height: 16px; border: #ffffff 0px" type="text" value="loading..." /> |
Segundo Botão
Onde clica para buscar os dados e aparecer a tela de resultados.
|
<input id="WLSearchBoxButton" src="http://search.live.com/s/siteowner/searchbutton_normal.PNG" style="border-style: none" type="image" />
|
No primeiro botão, coloco como background uma imagem usada junto ao site da Microsoft.
Primeiro JavaScript
|
<script charset="utf-8" type="text/javascript">
var WLSearchBoxConfiguration=
{
"global":{
"serverDNS":"search.live.com"
},
"appearance":{
"autoHideTopControl":false,
"width":600,
"height":400
},
"scopes":[
{
"type":"web",
"caption":"|MAURICIOJUNIOR.ORG|",
"searchParam":"site:http:\/\/www.mauriciojunior.org"
}
,
{
"type":"web",
"caption":"Web",
"searchParam":""
}
]
}
</script> |
Explicação: O mais importante aqui é você colocar um label para o titulo cujo está com o nome caption junto ao javascript. Depois o próximo parâmetro que precisa ser atribuído é o searchParam cujo você coloca o site onde deverá ser buscado os dados.
Segundo JavaScript
|
<script language="javascript" src="http://search.live.com/bootstrap.js?ServId=SearchBox&ServId=SearchBoxWeb& Callback=WLSearchBoxScriptReady"></script> |
Explicação: Esse segundo javascript é apenas para aparecer a tela e utilizar o callback.
Resultado final.
Espero ter ajudado a todos. Segue todo o código fonte utilizando tabelas e imagens específicas abaixo.
|
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="right">
<table>
<tr>
<td>
<img src="http://search.live.com/s/siteowner/poweredbywl.gif" />
</td>
<td>
<div id="WLSearchBoxDiv" style="width: 162px">
<table cellpadding="0" cellspacing="0">
<tr id="WLSearchBoxPlaceholder">
<td style="border-right: #4b7b9f 2px; border-top: #4b7b9f 2px solid; border-left: #4b7b9f 2px solid; border-bottom: #4b7b9f 2px solid">
<input id="WLSearchBoxInput" size="11" style="background-position: right 50px; background-image: url('http://search.live.com/s/siteowner/searchbox_background.png'); width: 161px; background-repeat: no-repeat; height: 16px; border: #ffffff 0px" type="text" value="loading..." />
</td>
<td style="border: #4b7b9f 2px solid">
<input id="WLSearchBoxButton" src="http://search.live.com/s/siteowner/searchbutton_normal.PNG" style="border-style: none" type="image" />
</td>
</tr>
</table>
<script charset="utf-8" type="text/javascript">
var WLSearchBoxConfiguration=
{
"global":{
"serverDNS":"search.live.com"
},
"appearance":{
"autoHideTopControl":false,
"width":600,
"height":400
},
"scopes":[
{
"type":"web",
"caption":"|MAURICIOJUNIOR.ORG|",
"searchParam":"site:http:\/\/www.mauriciojunior.org"
}
,
{
"type":"web",
"caption":"Web",
"searchParam":""
}
]
}
</script>
<script language="javascript" src="http://search.live.com/bootstrap.js?ServId=SearchBox&ServId=SearchBoxWeb& Callback=WLSearchBoxScriptReady"></script>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
|
Espero que ajude a todos.
Mauricio Junior
www.mauriciojunior.org