Tema: Ayuda autocompletar combobox ajax
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 01/03/2011, 16:44
ensendedor
 
Fecha de Ingreso: marzo-2011
Mensajes: 2
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Ayuda autocompletar combobox ajax
Muchas gracias IsaBelM por tu pronta respuesta! pero lamento informar que he configurado el php para que se conecte a mi bd, lo he probado y funciona perfectamente.
Al momento de escribir mas de 2 caracteres en el html no hace absolutamente nada!

Ademas, necesito autocompletar el nombre del usuario, pero tambien necesito guardar su id, ya que esto va en un formulario donde al enviarlo el id del usuario seleccionado se guarda en otra tabla de la base de datos. por eso mi propuesta era la de usar un xml.

si alguien se anima a revisar el codigo, aqui esta:

archivo SelUsuario.html

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <STYLE TYPE="text/css">
  6. #contenedorOpt div.seleccionado {font-weight:bold; background:#F0F0F0; color:#FF6600;}
  7. #contenedorOpt div.deseleccionado {background:#FFFFFF; color:#000000;}
  8. #contenedorOpt div {font:11px verdana; color:#000000; cursor:pointer; text-align:left; padding:2px 5px;}
  9.  
  10. .capa {
  11. background: #FFFFFF;
  12. border:1px solid rgb(120,120,120);
  13. width: 144px;
  14. _width: 146px;
  15. text-align: left;
  16. position: absolute;
  17. }
  18. </STYLE>
  19. <script type="text/javascript">
  20. var TxtId = ''; // el texbox desde donde se lanza la consulta y donde ha de imprimirse la opción cuando se usa la función Pegar
  21.  
  22. var SelUsuario = {
  23.  
  24. captura_objeto : function(idnombre) {
  25.         return document.getElementById(idnombre);
  26. },
  27.  
  28.  
  29. Evento: function (elemento,nomevento,funcion) {
  30.       if (elemento.attachEvent) {
  31.               var f=function() {
  32.                 funcion.call(elemento,window.event);
  33.             }
  34.             elemento.attachEvent('on'+nomevento,f);
  35.             return true;
  36.       } else if (elemento.addEventListener) {
  37.               elemento.addEventListener(nomevento,funcion,false);
  38.               return true;
  39.         }else{
  40.               return false;
  41.     }
  42. },
  43.  
  44.  
  45. creaAjax: function (){
  46. var ajax = false;
  47.     ajax = new XMLHttpRequest();
  48. return ajax;
  49. },
  50.  
  51.  
  52. init: function(){
  53. var tablas = document.body.getElementsByTagName('table');
  54.     for (i=0; i < tablas.length; i++) {
  55.         var inpt = tablas[i].getElementsByTagName('input');
  56.                 SelUsuario.Evento(SelUsuario.captura_objeto(inpt[2].id), 'keyup', SelUsuario.Empieza);
  57.                 SelUsuario.Evento(SelUsuario.captura_objeto('contenedorOpt'), 'mouseover', SelUsuario.Seleccionar);
  58.                SelUsuario.Evento(SelUsuario.captura_objeto(inpt[2].id), 'keydown', SelUsuario.Pegar2);
  59.                 SelUsuario.Evento(SelUsuario.captura_objeto(inpt[2].id), 'blur', SelUsuario.Cerrar);
  60.     }
  61. },
  62.  
  63.  
  64.  
  65. PosicionAbsolutaElemento: function(elTxtBox)  {
  66.       if (typeof elTxtBox == "string")
  67.         var elTxtBox = SelUsuario.captura_objeto(elTxtBox);
  68.             if (!elTxtBox) return { top:0,left:0 };
  69.           var y = 0;
  70.           var x = 0;
  71.               while (elTxtBox.offsetParent) {
  72.                     x += elTxtBox.offsetLeft;
  73.                     y += elTxtBox.offsetTop;
  74.                 elTxtBox = elTxtBox.offsetParent;
  75.               }
  76.           return {top:y,left:x};
  77.  
  78. },
  79.  
  80.  
  81. Desplieaga: function(posLeft,posTop) {
  82. var elDiv = SelUsuario.captura_objeto('contenedorOpt');
  83.     elDiv.style.left = posLeft+'px';
  84.     elDiv.style.top = parseInt(posTop+21) +'px';
  85.             elDiv.style.display = 'block';
  86.     elDiv.style.zIndex = 100;
  87. },
  88.  
  89.  
  90. Empieza: function (ev) {
  91. TxtId = SelUsuario.captura_objeto(this.id).id;
  92. var elTxtBox = SelUsuario.captura_objeto(this.id);
  93. var str = elTxtBox.value;
  94. var elDiv = SelUsuario.captura_objeto('contenedorOpt');
  95. var opt = elDiv.getElementsByTagName('DIV');
  96. var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
  97.  
  98.      if (keyCode == 40) {
  99.         SelUsuario.BajaOpt ('contenedorOpt')
  100.  
  101.      } else if (keyCode == 38) {
  102.         SelUsuario.SubeOpt ('contenedorOpt')
  103.  
  104.     } else if (keyCode == 13) {
  105.         for (var i = 0; i <= opt.length-1; i++) {
  106.             if (opt[i].className == "seleccionado") { 
  107.                 str = opt[i].id;
  108.                 if (elDiv.style.display == "block"); elDiv.style.display= "none";
  109.         break;
  110.             }
  111.         }
  112.  
  113.         try{
  114.             ev.preventDefault();
  115.         }catch(e){
  116.             ev.returnValue = false;
  117.         }
  118.     } else {
  119.  
  120.         if (str.length < 2) { 
  121. if (elDiv.style.display == "none")  elDiv.style.display= "none";
  122. else elDiv.style.display= "none";    
  123. return;
  124.  }
  125.  
  126. ajax = SelUsuario.creaAjax()
  127. if (ajax==null) {
  128. alert ("Tu navegador no soporta Ajax");
  129. return;
  130. } 
  131.  
  132. var url="SelecUsuarios.php?q="+escape(str);
  133. ajax.open("GET",url,true);
  134. ajax.onreadystatechange = function () { 
  135. var PosElemento = SelUsuario.PosicionAbsolutaElemento(elTxtBox);
  136. var posicionInicialLeft = parseInt(PosElemento.left);
  137. var posicionInicialTop = parseInt(PosElemento.top);
  138.  
  139. if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  140. elDiv.innerHTML = "<p align='center'><img src='precarga.gif' border='0px' widht='15px' height='15px'/></p>";
  141. elDiv.style.display= "block";
  142. }
  143.  
  144. else if (ajax.readyState==4) {
  145. if (ajax.status==200) {
  146. elDiv.innerHTML = unescape(ajax.responseText);
  147. }else {
  148. elDiv.innerHTML = "<p>Se ha producido un error</p>";
  149. }
  150. if (elDiv.style.display == "none")  elDiv.style.display= "block";
  151. }
  152. SelUsuario.Desplieaga(posicionInicialLeft, posicionInicialTop);
  153. }
  154. ajax.send(null);
  155.  return
  156. }
  157. },
  158.  
  159. Seleccionar: function () {
  160. var opt = SelUsuario.captura_objeto('contenedorOpt').getElementsByTagName('DIV');
  161. for (var i = 0; i < opt.length; i++) {
  162. SelUsuario.Evento(opt[i], 'click', function() {
  163. SelUsuario.Pegar(this.id);
  164. })   
  165. SelUsuario.Evento(opt[i], 'mouseover',  function() {
  166. SelUsuario.Marcar(this.id);
  167. })
  168. }
  169. },
  170.  
  171.  
  172. Pegar: function (valor) {
  173. var elDiv = SelUsuario.captura_objeto('contenedorOpt')
  174.     SelUsuario.captura_objeto(TxtId).value = valor;
  175.             if (elDiv.style.display == "block"); elDiv.style.display= "none";        
  176. },
  177.  
  178.  
  179. Marcar: function (valor) {
  180. var selecionado = SelUsuario.captura_objeto(valor);
  181. var opt = SelUsuario.captura_objeto('contenedorOpt').getElementsByTagName('DIV');
  182. for (var i = 0; i < opt.length; i++) {
  183. if (opt[i].className == "seleccionado") { 
  184. opt[i].className = "deseleccionado";
  185. selecionado.className = "seleccionado";
  186. break;
  187. } 
  188.     }
  189. },
  190.  
  191.  
  192. Pegar2: function (ev) {
  193. var elDiv = SelUsuario.captura_objeto('contenedorOpt')
  194. var opt = elDiv.getElementsByTagName('DIV');
  195. var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
  196.  
  197. if ((keyCode == 13) || (keyCode == 9)) {
  198. for (var i = 0; i <= opt.length-1; i++) {
  199. if (opt[i].className == "seleccionado") { 
  200. SelUsuario.captura_objeto(this.id).value = opt[i].id;
  201. if (elDiv.style.display == "block"); elDiv.style.display= "none";
  202. break;
  203. }
  204. }
  205.  
  206.  if (keyCode == 13) {
  207. try{
  208. ev.preventDefault();
  209. }catch(e){
  210. ev.returnValue = false;
  211.         }
  212.     }
  213.     }    
  214. },
  215.  
  216. BajaOpt: function() {
  217. var opt = SelUsuario.captura_objeto('contenedorOpt').getElementsByTagName('DIV');
  218.     for (var i = 0; i <= opt.length-1; i++) {
  219. if (opt[i].className == "seleccionado") { 
  220. opt[i].className = "deseleccionado";
  221. if (i < opt.length-1){
  222. i++;
  223. }else{
  224. i = 0;
  225. }
  226. opt[i].className = "seleccionado"
  227. }
  228. }
  229. },
  230.  
  231.  
  232. SubeOpt: function() {
  233. var opt = SelUsuario.captura_objeto('contenedorOpt').getElementsByTagName('DIV');
  234. for (var i = 0; i <= opt.length-1; i++) {
  235. if (opt[i].className == "seleccionado") { 
  236. opt[i].className = "deseleccionado";
  237. if (i < opt.length && i > 0){
  238.  i--;
  239. }else{
  240.  i = opt.length-1;
  241. }
  242. opt[i].className = "seleccionado"
  243. }
  244. }
  245. },
  246.  
  247.  
  248. Cerrar: function () {
  249. setTimeout("var elDiv = SelUsuario.captura_objeto('contenedorOpt'); if (elDiv.style.display == 'block'); elDiv.style.display= 'none';", 1000);
  250. }
  251. }
  252. SelUsuario.Evento(window, 'load', SelUsuario.init); 
  253. </script> 
  254. </head>
  255. <body>
  256. <table border="1" id="idt_1">
  257. <tr><td>Nombre Usuario: <input type="text" name="txt" id="txt1" value="" autocomplete="off"></td></tr>
  258.  </table>
  259. <table border="1" id="idt_2">
  260. <tr><td>Nombre Usuario: <input type="text" name="txt" id="txt2" value="" autocomplete="off"></td></tr>
  261.  </table>
  262. <div id="contenedorOpt" class="capa" style="display:none;"></div>
  263. </body>
  264. </html>

Archivo selecUsuarios.php

Código PHP: 
Ver original
  1. <?php
  2. $usuario = $_GET['q'];
  3.  
  4. if (strlen($usuario) >= 2) {
  5.     
  6.     include "../conexion.php";
  7.  
  8.     $sql = "SELECT Nombre FROM CrmContactos WHERE Nombre LIKE '".$usuario."%' ORDER BY Nombre asc";
  9.     $result = mysql_query($sql);
  10.     $nReg= mysql_num_rows($result);
  11.     $contador=1;
  12.     
  13.     if($row = mysql_fetch_array($result)){
  14.     
  15.         do {
  16.             if($contador == 0){  
  17.                 echo  '<div id="'.$row['Nombre'].'" class="seleccionado">' .ResaltarSubStr($row['Nombre'], $usuario). '</div>';
  18.             } else {
  19.                 echo  '<div id="'.$row['Nombre'].'" class="">' .ResaltarSubStr($row['Nombre'], $usuario). '</div>';
  20.             }
  21.             $contador += 1;
  22.         } while ($row = mysql_fetch_array($result));
  23.     
  24.     }else{ 
  25.         echo '<p class="deseleccionado"><strong>Sin resultados</strong></p>';
  26.     }
  27. }
  28.  
  29.  
  30.  
  31.     // ========= Funciones ===========
  32.     function ResaltarSubStr($texto, $usuario) {
  33.         $patron = "/\b($usuario)+(\w)/";
  34.         $marca = preg_replace($patron, "<strong>$1</strong>$2", $texto);
  35.         //$marca = $usuario;
  36.         return $marca;
  37.     }
  38.     // ========= Fin Funciones ===========
  39. ?>

Si alguien mas tiene otra propuesta sencilla como esta que funcione se lo agradeceria muchisimo!