duda con buscador de tiempo real

echo_ · #1 (**permalink**) 18/02/2012, 20:44

buenos dias tengo el siguiente formulario pero tiene keycode y queria cambiarlo por mouse como lo consigo espero y me puedan ayudar por favor

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 19 - Autocompletar</title>
<script type="text/javascript">
var peticion = null;
var elementoSeleccionado = -1;
var sugerencias = null;
var cacheSugerencias = {};
 
function inicializa_xhr() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); 
  } else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
}
 
Array.prototype.formateaLista = function() {
  var codigoHtml = "";
 
  codigoHtml = "<ul>";
  for(var i=0; i<this.length; i++) {
    if(i == elementoSeleccionado) {
      codigoHtml += "<li class=\"seleccionado\">"+this[i]+"</li>";
    }
    else {
      codigoHtml += "<li>"+this[i]+"</li>";
    }
  }
  codigoHtml += "</ul>";
 
  return codigoHtml;
};
 
function autocompleta() {
  var elEvento = arguments[0] || window.event;
  var tecla = elEvento.keyCode;
 
  if(tecla == 40) { // Flecha Abajo
    if(elementoSeleccionado+1 < sugerencias.length) {
      elementoSeleccionado++;
    }
    muestraSugerencias();
  }
  else if(tecla == 38) { // Flecha Arriba
    if(elementoSeleccionado > 0) {
      elementoSeleccionado--;
    }
    muestraSugerencias();
  }
  else if(tecla == 13) { // ENTER o Intro
    seleccionaElemento();
  }
  else {
    var texto = document.getElementById("escuela").value;
 
    // Si es la tecla de borrado y el texto es vacío, ocultar la lista
    if(tecla == 8 && texto == "") {
      borraLista();
      return;
    }
 
    if(cacheSugerencias[texto] == null) {
      peticion = inicializa_xhr();
 
      peticion.onreadystatechange = function() { 
        if(peticion.readyState == 4) {
          if(peticion.status == 200) {
            sugerencias = eval('('+peticion.responseText+')');
            if(sugerencias.length == 0) {
              sinResultados();
            }
            else {
              cacheSugerencias[texto] = sugerencias;
              actualizaSugerencias();
            }
          }
        }
      };
 
      peticion.open('POST', 'http://localhost/servidor/autocompletaMunicipios.php?nocache='+Math.random(), true);
      peticion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      peticion.send('escuela='+encodeURIComponent(texto));
    }
    else {
      sugerencias = cacheSugerencias[texto];
      actualizaSugerencias();
    }
  }
}
 
function sinResultados() {
  document.getElementById("sugerencias").innerHTML = "No existen municipios que empiecen con ese texto";
  document.getElementById("sugerencias").style.display = "block";
}
 
function actualizaSugerencias() {
  elementoSeleccionado = -1;
  muestraSugerencias();
}
 
function seleccionaElemento() {
  if(sugerencias[elementoSeleccionado]) {
    document.getElementById("escuela").value = sugerencias[elementoSeleccionado];
    borraLista();
  }
}
 
function muestraSugerencias() {
  var zonaSugerencias = document.getElementById("sugerencias");
 
  zonaSugerencias.innerHTML = sugerencias.formateaLista();
  zonaSugerencias.style.display = 'block';  
}
 
function borraLista() {
  document.getElementById("sugerencias").innerHTML = "";
  document.getElementById("sugerencias").style.display = "none";
}
 
window.onload = function() {
  // Crear elemento de tipo <div> para mostrar las sugerencias del servidor
  var elDiv = document.createElement("div");
  elDiv.id = "sugerencias";
  document.body.appendChild(elDiv);
 
  document.getElementById("escuela").onkeyup = autocompleta;
  document.getElementById("escuela").focus();
}
</script>
 
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;}
#sugerencias {width:200px; border:1px solid black; display:none; margin-left: 83px;}
#sugerencias ul {list-style: none; margin: 0; padding: 0; font-size:.85em;}
#sugerencias ul li {padding: .2em; border-bottom: 1px solid silver;}
.seleccionado {font-weight:bold; background-color: #FFFF00;}
</style>
 
</head>
 
<body>
<h1>Autocompletar texto</h1>
 
<form>
  <label for="escuela">Escuela</label> &nbsp;&nbsp;
  <input type="text" id="escuela" name="escuela" size="30" />
  <input type="text" id="oculto" name="oculto" style="display:none;" />
</form>
 
</body>
</html>