Ver Mensaje Individual
  #3 (permalink)  
Antiguo 27/09/2013, 15:39
thorstorm
 
Fecha de Ingreso: septiembre-2013
Mensajes: 12
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Validación de valores devueltos por AJAX mediante onBlur

Después de batallar con el problema durante estos días he conseguido arreglarlo. No sé si es la forma más elegante de resolverlo, pero al menos he conseguido que realice su función de la manera que necesito.

Estas dos maneras son equivalentes:
Código Javascript:
Ver original
  1. <div id="contenedor">
  2.    <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
  3.    <div id="respuesta-ajax">
  4.       <ul>
  5.          <li id="listado"></li>
  6.       </ul>
  7.    </div>
  8. </div>
  9.  
  10. <script type="text/javascript" >
  11. function ajaxListaAutocompletar(){
  12.  
  13.        var ajax=nuevoAjax();
  14.        var respuesta=document.getElementById('respuesta-ajax');
  15.  
  16.        ajax.onreadystatechange=function() {
  17.  
  18.             if (ajax.readyState==1){
  19.                 // Mientras carga...
  20.             }
  21.             if (ajax.readyState==4){
  22.               respuesta.innerHTML=ajax.responseText;
  23.        
  24.               $('#contenedor').on('mousedown', '#listado', function(){
  25.                  var that=$(this);
  26.                 // funcion que pone el texto en input
  27.                 var selectItem = function(that){
  28.                    $(that).parent().parent().parent().find('input').val($(that).find('b').html());
  29.                    // Borro el cuadro de autocompletar
  30.                    $(that).parent().remove();
  31.                   };
  32.        
  33.                  selectItem(that);
  34.               });
  35.            }
  36. }
  37. </script>

Código Javascript:
Ver original
  1. <div id="contenedor">
  2.    <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
  3.    <div id="respuesta-ajax">
  4.       <ul>
  5.          <li id="listado"></li>
  6.       </ul>
  7.    Aquí viene, por AJAX, la lista de opciones para autocompletar el input
  8.    </div>
  9. </div>
  10.  
  11. <script type="text/javascript" >
  12. function ajaxListaAutocompletar(){
  13.  
  14.        var ajax=nuevoAjax();
  15.        var respuesta=document.getElementById('respuesta-ajax');
  16.  
  17.        ajax.onreadystatechange=function() {
  18.  
  19.             if (ajax.readyState==1){
  20.                 // Mientras carga...
  21.             }
  22.             if (ajax.readyState==4){
  23.               respuesta.innerHTML=ajax.responseText;
  24.            }
  25. }
  26. $(document).ready(function(){
  27.             $('#contenedor').on('mousedown', '#listado', function(){
  28.                  var that=$(this);
  29.                 // funcion que pone el texto en input
  30.                 var selectItem = function(that){
  31.                    $(that).parent().parent().parent().find('input').val($(that).find('b').html());
  32.                    // Borro el cuadro de autocompletar
  33.                    $(that).parent().remove();
  34.                   };
  35.        
  36.                  selectItem(that);
  37.               });
  38. });
  39. </script>

Explicación: Me di cuenta de que el foco se iba del input, ejecutando el onBlur, cuando soltaba el botón del ratón. Ejecutándolo en base al 'mousedown' ya no hace falta la comprobación del valor dentro de la función. Aclarar que en la función '.on(...', cuando se define para eventos que se propagan, debe indicarse dónde se quiere originar el evento (#listado) y hasta dónde se puede propagar (#contenedor).

¡A los usuarios que entiendan español!