Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ronaldo Marcos

Navegar em lista de autopreenchimento com teclado

Recommended Posts

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

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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):

 

 

<script>
if (!!window.attachEvent) {
// IE
    document.getElementById('nomecontato').attachEvent('onkeyup', buscaContato);
}
else {
// firefox/chrome
document.getElementById('nomecontato').addEventListener('keyup', buscaContato, false);
}
</script>

 

Ps: Parabens por iniciar javascript sem usar frameworks!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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
  } 
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Xanbruzum,

 

Aparentemente pelo código dele, jQuery não está sendo usado. Vamos tentar sugerir soluções em javascript puro, por favor ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

sim, pode se manter a linha no js puro ou mesclar também

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.



Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.