Problema con onblur

[Adler]

Hola

Ayer a raíz de una consulta me acordé que había dejado aparcado un problema que aún no se como solucionar

Se trata de un autocomplete

Ante el evento onkeyup se muestra una capa con las distintas opciones.

Código javascript:

window.onload = function () {
var elemText = document.getElementById("txt");
        
    elemText.onkeyup = function() {
        muestraDIV(elemento.value);
        }
 
    elemText.onblur = function () {
        var ref = document.getElementById("contenedor").getElementsByTagName("A");
        for (var i = 0; i < ref.length; i++) {
        ref[i].id.onclick = rellenarCaja(ref[i].id);
        }
        }
 
}
 

Cuando el evento es onblur, saco todos los elementos que hay en la capa que se ha desplegado y cuando se hace click en uno de ellos, llama a la función rellenarCaja, que rellena el campo de texto.

Código javascript:

function rellenarCaja(texto) {    
var elemDiv = document.getElementById("contenedor");
 
    if (texto.length == "") {
         elemDiv.style.display= "none";    
    }
    else
    {
        document.getElementById("txt").value = texto;
                elemDiv.style.display= "none";    
    }
}
 

Y aquí el problema, al quitar el foco del campo de texto, siempre me rellena la caja con el último elemento, da igual que haga click en la capa o en cualquier otra parte de la ventana.

Lo que quiero que ocurra.
+ Cuando el text pierda el foco, por que se haya clickeado en una de las opciones, se oculte la capa e imprima en el text la opción seleccionada.
+ Cuando el text pierda el foco, por que se haya clickeado en cualquier parte de la ventana, excepto en la capa, se oculte la capa.

Gracias