Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Ayuda autocompletar combobox ajax

 Estas en el tema de Ayuda autocompletar combobox ajax en el foro de Frameworks JS en Foros del Web. Hola amigos, les cuento que he estado buscando por mas de 5 o 6 hs un ejemplo claro de lo que necesito hacer sin poder ...
  #1 (permalink)  
Antiguo 01/03/2011, 12:07
 
Fecha de Ingreso: marzo-2011
Mensajes: 2
Antigüedad: 13 años, 9 meses
Puntos: 0
Pregunta Ayuda autocompletar combobox ajax
Hola amigos, les cuento que he estado buscando por mas de 5 o 6 hs un ejemplo claro de lo que necesito hacer sin poder encontrarlo por ningun lado.

tengo una base de datos con clientes, los cuales tengo que traer dentro de un combobox (select) en un formulario. el combo guarda el id y el nombre de cada cliente. El problema es que son 18000 clientes aproximadamente, y cargar el combo cada vez se hace pesadisimo y demora 4 o 5 minutos para completarlo.

Entonces necesitaria traer un combo vacio, donde el usuario pueda escribir el nombre del cliente y que este muestre opciones para que el usuario seleccione el que necesita.
Algo asi como los autocompletar de hotmail o gmail.

he visto miles de ejemplos pero ninguno hace lo que quiero exactamente, y creo que no es tan complejo.

seria cuestion de crear el combo en el formulario y por medio de java y ajax realizar una consulta a la base de datos con un LIKE enviando como parametro el texto ingresado por el usuario, esta consulta deberia generar un xml para poblar el combo.

el tema es que no estoy tan familiarizado con ajax y dhtml... si alguien tiene un ejemplo concreto, sin usar plugins externos, ni archivos .js raros seria de gran ayuda.

Desde ya muchas gracias!
  #2 (permalink)  
Antiguo 01/03/2011, 14:12
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Ayuda autocompletar combobox ajax
5 ó 6 horas de búsqueda infructuosa. lo tienes mas cerca de lo que crees
  #3 (permalink)  
Antiguo 01/03/2011, 16:44
 
Fecha de Ingreso: marzo-2011
Mensajes: 2
Antigüedad: 13 años, 9 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!
  #4 (permalink)  
Antiguo 02/03/2011, 07:48
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Ayuda autocompletar combobox ajax
no tengo manera de probarlo, ya que el lenguaje del servidor que uso es asp. lamento no poder ayudarte

Etiquetas: ajax, combobox, autocompletado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 07:13.