/*
* CAR: Script de auto-completar compo de busca
*
* Deve ser criada uma div com id div_busca no começo do da página.
* Ex. de formulário:
*/
//Variáveis globais necessárias para o funcionamento do script
var ajax = null; //Salva o objeto XMLHttpRequest para que haja apenas uma chamada ajax por vez
var flag_submit = true; //Flag para controle da submissão do formulario, ela impede que o formulário seja submetido caso a tecla [ENTER] tenha sido precionada para selecionar um item da lista de keywords
var item_atual = null; //Salva o item que está selecionado na lista de keywords
//Função que cria o objeto XMLHttpRequest compatível com qualquer navegador.
function ajaxInit()
{
var xmlhttp;
try
{
xmlhttp = new XMLHttpRequest();
}
catch(ee)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
xmlhttp = false;
}
} //GP catch(e)
} //GP catch(ee)
return xmlhttp;
} //GP function ajaxInit()
//CAR: Função que é chamada a cada tecla que é pressionada (OnKeyUp) no campo de busca
function busca(obj, e)
{
//A div_busca deve ser uma div que deve estar no início do código HTML da página (mas dentro do )
var div = document.getElementById('div_busca');
//Se a tecla pressionada for as setas (para cima ou para baixo)
if((e.keyCode == 38) || (e.keyCode == 40))
{
//verifica se não tem nenhum item selecionado
if(item_atual == null)
{
//e caso a seta pressionada seja para baixo
if(e.keyCode == 40)
{
//seleciona o primeiro elemento da lista
mouseover(div.firstChild.firstChild.firstChild);
}
//caso seja a seta para cima
else
{
//seleciona o último elemento da lista
mouseover(div.firstChild.lastChild.firstChild);
}
}
//caso já tenha algum item selecionado
else
{
//verifica se a seta pressionada foi a seta para baixo
if(e.keyCode == 40)
{
//verifica se existe um próximo elemento na lista
if(item_atual.parentNode.nextSibling)
{
//caso exista ele será selecionado
mouseover(item_atual.parentNode.nextSibling.firstChild);
}
}
//caso seja a seta para cima
else
{
//verifica se existe um elemento anterior ao selecionado na lista
if(item_atual.parentNode.previousSibling)
{
//caso existe ele será selecionado
mouseover(item_atual.parentNode.previousSibling.firstChild);
}
}
}
}
//Se a tecla pressionada for as setas (para esquerda ou direita)
else if((e.keyCode == 37) || (e.keyCode == 39))
{
//Não faz nada. É preciso ter este IF pq não pode fazer nada mesmo, se não tiver o IF ele vai entrar no ELSE lá do final
}
//Se a tecla pressionada for [ESC]
else if(e.keyCode == 27)
{
//Some com a DIV e volta as variaveis de controle aos seus valores iniciais
item_atual = null;
div.style.display = "none";
}
//Se a tecla pressionada for [ENTER]
else if(e.keyCode == 13)
{
//Se tiver algum item selecionado
if(item_atual)
{
//Pega o item que está selecionado, coloca no campo de texto e some com a DIV
seleciona(item_atual);
}
//Caso não tenha nenhum item selecionado
else
{
//O formulário deverá ser submetido
document.form_busca.submit();
}
}
//Caso a tecla pressionada seja qualquer outra (normalmente será um caractere da palavra-chave que deverá ser buscada)
else
{
//Caso já tenha uma chamada AJAX em andamento
if(ajax != null)
{
//ela sera abortada
ajax.abort();
}
//Se a string no campo de busca for vazia
if(obj.value == '')
{
//Esconde a DIV
div.style.display = "none";
document.getElementById('busca_loading').style.display = 'none';
return;
}
//Cria uma nova chamada AJAX para buscar as keywords com base nos caracteres já digitados.
ajax = ajaxInit();
ajax.open("GET", "/ajax_busca.php?Kw="+encodeURIComponent(obj.value), true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
ajax.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
ajax.setRequestHeader("Pragma", "no-cache");
ajax.onreadystatechange = function()
{
if(ajax.readyState == 1)
{
var isNav4, isIE4;
//mostra a gif "loading"
document.getElementById('busca_loading').style.display = '';
}
if(ajax.readyState == 4)
{
if(ajax.status == 200)
{
var resultado = ajax.responseText;
item_atual = null;
//Esconde a gif "loading"
document.getElementById('busca_loading').style.display = 'none';
//Caso retorne pelo menos 1 keyword
if(resultado != "")
{
//Caso a DIV ainda não esteja na tela
if(div.style.display != "")
{
//Faz a DIV aparecer e arruma a aparência dela (tamanho, cor, borda, posição, etc...)
div.style.display = "";
div.style.backgroundColor = "white";
div.style.borderColor = "black";
div.style.borderWidth = "1px";
div.style.borderStyle = "solid";
div.style.color = "#CCCCCC";
div.style.position = "absolute";
div.style.top = (obj.offsetParent.offsetTop + obj.offsetTop + obj.offsetHeight + 1).toString() + "px";
div.style.left = (obj.offsetParent.offsetLeft + obj.offsetLeft).toString() + "px";
div.style.width = "auto";
div.style.height = "auto";
div.style.zIndex = 999;
div.style.padding = "5px";
}
//Monta uma lista com todas as keywords retornadas e coloca esta lista na DIV
resultado = resultado.split("|");
var i, str = "";
str += "";
for(i = 0; i < resultado.length; i++)
{
str += "- "+resultado[i]+"
";
}
str += "
";
div.innerHTML = str;
}
else
{
//Caso contrario, some com a DIV
div.style.display = "none";
}
ajax = null;
}
}
}
ajax.send(null);
}
}
//CAR: Copia o texto do item selecionado para a caixa de texto
function seleciona(obj)
{
var div = document.getElementById('div_busca');
document.getElementById('Kw').value = obj.innerHTML;
div.style.display = "none";
document.getElementById('Kw').focus();
item_atual = null;
flag_submit = true;
setTimeout("flag_submit = true;", 100);
}
function submeter()
{
return flag_submit;
}
//CAR: Seleciona o objeto passado por parametro
function mouseover(obj)
{
//Pega todos os itens da lista de keywords
var itens = document.getElementById('div_busca').firstChild.childNodes;
var i;
item_atual = null;
//Percorre todos os itens da lista
for(i = 0; i < itens.length; i++)
{
//deixando todos iguais
itens[i].firstChild.style.backgroundColor = "";
}
//Se o objeto passado por parametro existir
if(obj != null)
{
//Ele passará a ser o selecionbado
obj.style.backgroundColor = "#CCCCCC";
item_atual = obj;
}
//Impede que o formulário seja submetido para o caso da função ter sido chamada pela evento da tecla [ENTER]
flag_submit = false;
}