Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
e se eu quisesse pela tecla tab seria usando o keycode == 9 ??? tipo:
$("#parentOfTextbox").on('keydown', '#textbox', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
// chame a pesquisa aqui
}
});@Xanbruzum,
Aparentemente pelo código dele, jQuery não está sendo usado. Vamos tentar sugerir soluções em javascript puro, por favor ;)
sim, pode se manter a linha no js puro ou mesclar também
Eu comecei a ler o que escrevi correndo antes e vi que escrevi muita coisa errada:
"Disse que uso navegar em menus com o teclado usando javascript certinho, mas não consegui aqui talvez por seu um campo Input"
Fiote, na verdade eu não tenho um um script de navegação ainda, nos menus quando faço uso com for, mas ai desde o primeiro elemento eu já estou num dos itens LI, não é o caso aqui, que é um Input, se tento usar as setas do teclado cima/baixo ele só se movimenta dentro do input, não consigo sair dali.
No exemplo que o xanburzum deu com tab eu saio da caixa input e vou pra div, mas a ideia é sair direto com as setas para o primeiro item.
Talvez se eu criar um evento apenas para tratar essas teclas quando estiverem nesse input e depois usando uma navegação normal pelos LI dentro da Div (igual fazemos com menus).
É uma ideia, eu poderia fazer isso de diversas formas, mas quero pensar em algo sem muita gambiarra (algo limpo) que possa usar depois em outras aplicações sem muitas alterações. Já vi outros códigos por ai grandes demais.
O seu script de navegação está usando onkeyup como você falou.
De acordo com o seu código html, você TAMBÉM está usando onkeyup no input. Isso faz com que um evento substitua o outro.
Ao invés de deixar assim:
<input type="text" name="nomecontato" id="nomecontato" onkeyup="buscaContato();" size="20" autocomplete="off">
Tente fazer assim: Tire esse onkeyup daí, e adicione o script abaixo no FINAL da sua página (ou dentro de algum onload que você possa ter colocado no body):
// IE else { // firefox/chromePs: Parabens por iniciar javascript sem usar frameworks!