AJAX - O Objeto XMLHttpRequest - Parte 3

12/03/2006 16:00:00

Autor: Rondinely S. de Almeida

Serviços para Webmasters

function create_opcao(cidade) { //Cria um novo elemento OPTION.
    var new_opcao = document.createElement("option"); //Cria um OPTION.
    var texto = document.createTextNode(cidade.childNodes[0].data); //Cria um texto.
    //Adiciona o atributo de valor a nova opção.
    new_opcao.setAttribute("value",cidade.getAttribute("id")); 
    new_opcao.appendChild(texto); //Adiciona o texto a OPTION.
    return new_opcao; // Retorna a nova OPTION.
}

Esta é a função que usamos anteriormente para crias os elemento <OPTION> que fazem parte da listbox de resultados. Nesta função utilizamos métodos de criação de elementos HTML bem como seus atributos para gerar cada elemento <OPTION> da nossa listbox com o resultado da busca.

//Atualiza o campo de pesquisa com o valor da listbox.
function pesquisa_selecionada(listbox,e) { 
    document.getElementById("consulta").value = listbox.options[listbox.selectedIndex].text;
}

Esta função é atribuida ao evento onChange da listbox que possui o resultado da pesquisa. Isto garante que ao selecionarmos e mudarmos o valor selecionado na listbox, o mesmo será tranferido para a caixa de texto onde o usuário redige a busca.

function pesquisa_test_key(listbox,e) {  //Trata o pressionamento das teclas enter e escape
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if (code == 13) { //Caso enter passa o foco para o campo de pesquisa,  e desativa a listbox.
        document.getElementById("consulta").focus();
        document.getElementById("listboxresult").style.visibility="hidden";
        document.getElementById("listboxresult").disabled = true; //desabilita a listbox.
    } else if (code == 27) { //Caso escape (ESC), apaga o valor do campo de pesquisa, 
// passa o foco para ele e esconde a listbox.
        document.getElementById("consulta").value = "";
        document.getElementById("consulta").focus();
        document.getElementById("listboxresult").style.visibility="hidden";
        document.getElementById("listboxresult").disabled = true; //desabilita a listbox.
    }
}

Não deixe de ver também:

Esta função é atribuida ao evento onKeyPress da listbox e tem a responsabilidade de detectar o pressionamento das teclas <ENTER> e <ESC>. Quando <ENTER> é pressionada passamos o foco para a caixa de texto de pesquisa, escondemos e desabilitamos a listbox. Neste momento a caixa de texto estará com o valor da última seleção da listbox e manterá este valor. Caso a tecla <ESC> tenha sido pressionada, consideramos que o usuário tentou abortar a pesquisa, então apagamos o valor armazanado na caixa de texto, passamos o foco para ela, escondemos e desabilitamos a listbox.

function pesquisa_test_click(listbox,e) { //Testa se a listbox foi clicada.
    document.getElementById("consulta").focus(); //Passa o foco para o campo de pesquisa.
    document.getElementById("listboxresult").style.visibility="hidden";   //esconde a listbox.
    document.getElementById("listboxresult").disabled = true; //desabilita a listbox.
}

Esta função é atribuida ao evento onClick da listbox e tem a responsabilidade de detectar um clique do mouse sobre um item da listbox. Quando o clique é detectado, passamos o foco para a caixa de texto de pesquisa, que neste momento tem o valor da última seleção da listbox, e escondemos e desabilitamos a mesma.

function clearTime() {
    window.clearTimeout(settimeId); //Limpa qualquer chamada agendada anteriormente.  	
}

Nossa útima função no script deste documento é atribuida ao evento onBlur da caixa de texto de pesquisa e tem como responsabilidade cancelar qualquer pesquisa que tenha se iniciada, mas ainda não tenha sido mostrada na listbox, no momento em que a caixa de texto perde o foco. Considera-se que se o usuário abandonou a caixa de texto e não tem mais interesse no resultado da pesquisa.

<body>
    <input type="text" size="20" name="consulta" id="consulta" 
        onKeyUp="pesquisar(this.value,event)" onBlur="clearTime()" />
    <br/>
    <select name="listboxresult" id="listboxresult" size = "5" style="width:150px" 
        onClick="pesquisa_test_click(this,event);" 
    onChange="pesquisa_selecionada(this,event);" onKeyPress="pesquisa_test_key(this,event);">
    </select>
</body>

O código HTML do nosso documento não tem nada de mais, apenas os campos de formulário com as funções já comentadas atribuidas a seus respectivos eventos.

O documento presquisaAJAXcidades.php

Veremos agora o conteúdo do documento pesquisaAJAXcidades.php que tem a função de buscar as informações necessárias num banco de dados e apresentá-las no formato XML.

<?php
    header("Content-type: text/xml; charset=ISO-8859-1");
    print '<?xml version="1.0" encoding="ISO-8859-1"?>';
?>
<cidades>
<?php
    require_once("../dbexemplos.php");
    $buscar = $_GET['buscar'];
    $result = mysql_query("SELECT id, nome FROM municipios 
                                                WHERE nome LIKE '$buscar%' ORDER BY nome")
        or die("Query invalida: " . mysql_error());
    while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
        printf("<retorno id=\"%d\">%s</retorno>\n", $row[0],$row[1]);
    }
?>
</cidades>

AJAX - O Objeto XMLHttpRequest - Parte 3

12/03/2006 16:00:00

Autor: Rondinely S. de Almeida

O documento presquisaAJAXcidades.php

Artigos relacionados