Navegar em lista de autopreenchimento com teclado
Bom dia, eu criei uma lista de num input de auto-preenchimento (usando LI) que busca em um BD Mysql, contudo, não consigo navegar usando o teclado
HTML
> <body>
<form action="buscacontato.asp" method="post" id="formContato" name="formContato">
<input type="text" name="nomecontato" id="nomecontato" onkeyup="buscaContato();" size="20" autocomplete="off">
<div id="resultados"></div>
</form>
</body>Javascript
> function carregaObjetoComXML(sXml){
if (ehIE){
var xmldom = criaXMLDocument();
xmldom.loadXML(sXml);
} else {
var oParser = new DOMParser();
var xmldom = oParser.parseFromString(sXml,"text/xml");
}
return xmldom;
}// Instancia objeto do tipo XMLHttpRequest
var oXMLhttp = criaXMLHttpRequest();
function buscaContato() {
var oForm = document.getElementById("formContato");
var sURL = oForm.action;
// Codifica os parâmetros para serem passados ao POST
var nomecontato = document.getElementById("nomecontato").value;
if (nomecontato != "") {
oXMLhttp.open("post", sURL, true);
oXMLhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
oXMLhttp.onreadystatechange = function() {
if (oXMLhttp.readyState == 4) {
//Tratar a resposta do servidor
var arResult = oXMLhttp.responseText.split(",");
var nomes = arResult[0];
document.getElementById('resultados').style.display = "block"; }
document.getElementById("resultados").innerHTML = nomes;
};
oXMLhttp.send("nome="+nomecontato);
}
}
function setaContato(encontrado){
var cible = document.getElementById('s');
document.getElementById("nomecontato").value = encontrado;
document.getElementById('resultados').style.display = "none";
}e o ASP/SQL (caso alguém queira ver como cria as LI)
<%@ LANGUAGE="VBScript" %>
<!--#include file="variaveis.asp"-->
<%
nome = request.form("nome")
nome = uCase(Replace(nome," ","|"))
set rsprocuracontato = Server.createobject("adodb.recordset")
rsprocuracontato.CursorLocation=3
cmdsql = "SELECT id_contato, nome "
cmdsql = cmdsql & "from contato "
cmdsql = cmdsql & "where upper(nome) regexp '" & nome & "' "
rsprocuracontato.open cmdsql, "driver=MySQL ODBC 3.51 Driver;DATABASE="& bancodedados&";SERVER=" & ip & ";UID=" & nomebd & ";PASSWORD=" & senhabd & " "
lista = "<ul>"
do while not rsprocuracontato.eof
id = rsprocuracontato("id_contato")
lista = lista + "<li><a onclick='setaContato(this.innerHTML);' href='#' id='s'>" + rsprocuracontato("nome") + "</a></li>"
rsprocuracontato.movenext
loop
rsprocuracontato.close
response.write lista + "</ul>"
%>
Eu crio menus usando LI e navego por utilizando facilmente (usando javascript que não vou postar aqui pois interessa agora), acredito que por ser um campo input=text e estar usando um onkeyup.
Depois do item selecionado vou ter de colocar mais eventos nesse mesmo input, por exemplo: após a seleção fazer uma nova consulta com base nessa seleção preenchendo outros campos no formulário ou criar um novo registro caso não exista.
Não procurei nada parecido (pronto) pois quero entender a 'técnica' e com meus conhecimentos criar algo que eu saiba como funciona.
Minha pergunta é seguinte: Minha ideia de criar esse campo de auto-preenchimento dessa forma pode não funcionar direito? ou ainda dê pra implementar uma navegação pelo teclado dessa forma?
Obrigado
Discussão (6)
Carregando comentários...