Validación de valores devueltos por AJAX mediante onBlur

[thorstorm]

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:

<div id="contenedor">
   <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
   <div id="respuesta-ajax">
      <ul>
         <li id="listado"></li>
      </ul>
   </div>
</div>
 
<script type="text/javascript" >
function ajaxListaAutocompletar(){
 
       var ajax=nuevoAjax();
       var respuesta=document.getElementById('respuesta-ajax');
 
       ajax.onreadystatechange=function() {
 
            if (ajax.readyState==1){
                // Mientras carga...
            }
            if (ajax.readyState==4){
              respuesta.innerHTML=ajax.responseText;
        
              $('#contenedor').on('mousedown', '#listado', function(){
                 var that=$(this);
                // funcion que pone el texto en input
                var selectItem = function(that){
                   $(that).parent().parent().parent().find('input').val($(that).find('b').html());
                   // Borro el cuadro de autocompletar
                   $(that).parent().remove();
                  };
        
                 selectItem(that);
              }); 
           }
}
</script>
 

Código Javascript:

<div id="contenedor">
   <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
   <div id="respuesta-ajax">
      <ul>
         <li id="listado"></li>
      </ul>
   Aquí viene, por AJAX, la lista de opciones para autocompletar el input
   </div>
</div>
 
<script type="text/javascript" >
function ajaxListaAutocompletar(){
 
       var ajax=nuevoAjax();
       var respuesta=document.getElementById('respuesta-ajax');
 
       ajax.onreadystatechange=function() {
 
            if (ajax.readyState==1){
                // Mientras carga...
            }
            if (ajax.readyState==4){
              respuesta.innerHTML=ajax.responseText;
           }
}
$(document).ready(function(){
            $('#contenedor').on('mousedown', '#listado', function(){
                 var that=$(this);
                // funcion que pone el texto en input
                var selectItem = function(that){
                   $(that).parent().parent().parent().find('input').val($(that).find('b').html());
                   // Borro el cuadro de autocompletar
                   $(that).parent().remove();
                  };
        
                 selectItem(that);
              }); 
});
</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!