<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=utf-8"/>
<style type="text/css">
* {
padding: 0;
margin: 0;
position: relative;
}
input.autocomplete {
width: 200px;
font: 1em Verdana;
}
#contenedorOpt {
min-width: 200px;
width: auto;
display: none;
background: rgb(255, 255, 255);
border: 1px solid rgb(120,120,120);
text-align: left;
position: absolute;
z-index: 100;
}
#contenedorOpt {
list-style-type: none;
}
#contenedorOpt li {
font: 1em verdana;
text-align: left;
padding: 4px;
margin: 1px;
border: 1px solid rgb(255, 255, 255);
color: rgb(0, 0, 0);
cursor: default;
}
#contenedorOpt li.seleccionado {
border: 1px solid rgb(95, 82, 82);
border-radius: 5px;
background: rgb(219, 215, 215);
color: rgb(9, 8, 8);
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
new autoCompletado();
}, false);
function autoCompletado() {
this.elTxtBox = null;
this.ajax = new XMLHttpRequest();
this.peticiones = 0;
this.keyUpTimeout = 0;
this.input = document.querySelectorAll('.autocomplete');
this.elDiv = document.querySelector('#contenedorOpt');
this.url = 'SelecUsuarios.php';
this.opt = null;
this.optSel = null;
var _this = this;
Array.prototype.forEach.call(this.input, function(elem) {
elem.addEventListener('keyup', function(event) {_this.autoCompletaPulsacion(event, this)}, false);
elem.addEventListener('paste', function() {_this.copypasteRaton(this)}, false);
elem.addEventListener('keydown', function() {_this.rellenarConEnteryTab(event)}, false);
elem.addEventListener('blur', function() {_this.Cerrar()}, false);
elem.addEventListener('cut', function() {_this.copypasteRaton(this, this.value)}, false);
});
this.elDiv.addEventListener('click', function() {_this.rellenarConRaton()}, false);
}
autoCompletado.prototype.autoCompletaPulsacion = function(ev, elTxtBox) {
this.elTxtBox = elTxtBox;
if (this.elTxtBox.value.length <= 2) {
return;
}
var keyCode = ev.keyCode, _this = this;
if (keyCode == 40) { // flecha abajo
this.BajaOpt();
} else if (keyCode == 38) { // flecha arriba
this.SubeOpt();
} else if (keyCode == 13) { // enter
ev.preventDefault();
} else {
if (this.keyUpTimeout) clearTimeout(this.keyUpTimeout);
this.keyUpTimeout = setTimeout(function() {
_this.elTxtBox.insertAdjacentHTML('afterend', '<img src="./precarga.gif" />');
_this.ajax.open('POST', _this.url, true);
_this.ajax.onreadystatechange = function() {
if (_this.ajax.readyState == 4) {
if (_this.ajax.status == 200) {
_this.elDiv.innerHTML = _this.ajax.responseText;
_this.elTxtBox.nextElementSibling.remove();
_this.opt = _this.elDiv.getElementsByTagName('li');
[].forEach.call(_this.opt, function(elem) {
elem.addEventListener('mouseover', function() {
_this.Marcar(this);
}, false);
});
if (_this.peticiones++ == 0) {
var PosElemento = _this.elTxtBox.getBoundingClientRect(),
posicionLeft = PosElemento.left,
posicionTop = PosElemento.bottom;
_this.Desplieaga(posicionLeft, posicionTop);
}
if (_this.elTxtBox.value.length <= 2) {
_this.Cerrar();
}
}
}
}
_this.ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
_this.ajax.send('q='+_this.elTxtBox.value);
return;
}, 700);
}
}
autoCompletado.prototype.copypasteRaton = function(elTxtBox) {
var _this = this;
setTimeout(function() {_this.autoCompletaRaton(elTxtBox)}, 0);
}
autoCompletado.prototype.autoCompletaRaton = function(elTxtBox) {
this.elTxtBox = elTxtBox;
if (this.elTxtBox.value.length <= 2) {
return;
}
var _this = this;
this.elTxtBox.insertAdjacentHTML('afterend', '<img src="./precarga.gif" />');
this.ajax.open('POST', _this.url, true);
this.ajax.onreadystatechange = function() {
if (!_this.ajax || _this.ajax == null) { return; }
if (_this.ajax.readyState == 4) {
if (_this.ajax.status == 200) {
_this.elDiv.innerHTML = _this.ajax.responseText;
_this.elTxtBox.nextElementSibling.remove();
_this.opt = _this.elDiv.getElementsByTagName('li');
[].forEach.call(_this.opt, function(elem) {
elem.addEventListener('mouseover', function() {
_this.Marcar(this);
}, false);
});
if (_this.peticiones++ == 0) {
var PosElemento = _this.elTxtBox.getBoundingClientRect(),
posicionLeft = PosElemento.left,
posicionTop = PosElemento.bottom;
_this.Desplieaga(posicionLeft, posicionTop);
}
if (_this.elTxtBox.value.length <= 2) {
_this.Cerrar();
}
}
}
}
_this.ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
_this.ajax.send('q='+_this.elTxtBox.value);
return;
}
autoCompletado.prototype.Desplieaga = function(posLeft, posTop) {
this.elDiv.style.left = posLeft + 'px';
this.elDiv.style.top = posTop + 'px';
this.elDiv.style.display = 'block';
}
autoCompletado.prototype.Marcar = function(sel) {
this.optSel = sel;
for (var i = 0; i < this.opt.length; i++) {
if (this.opt[i].className == 'seleccionado') {
this.opt[i].className = '';
sel.className = 'seleccionado';
break;
}
}
}
autoCompletado.prototype.BajaOpt = function() {
for (var i = 0; i < this.opt.length; i++) {
if (this.opt[i].className == 'seleccionado') {
this.opt[i].className = '';
i = (i < this.opt.length-1) ? ++i : 0;
this.optSel = this.opt[i];
this.opt[i].className = 'seleccionado';
break;
}
}
}
autoCompletado.prototype.SubeOpt = function() {
for (var i = 0; i < this.opt.length; i++) {
if (this.opt[i].className == 'seleccionado') {
this.opt[i].className = '';
i = (i < this.opt.length && i > 0) ? --i : this.opt.length-1;
this.optSel = this.opt[i];
this.opt[i].className = 'seleccionado';
break;
}
}
}
autoCompletado.prototype.rellenarConRaton = function() {
this.elTxtBox.value = this.optSel.textContent;
this.Cerrar();
}
autoCompletado.prototype.rellenarConEnteryTab = function(ev) {
var keyCode = ev.keyCode;
if ((keyCode == 13) || (keyCode == 9)) {
this.elTxtBox.value = this.optSel.textContent;
this.Cerrar();
if (keyCode == 13) {
ev.preventDefault();
}
}
}
autoCompletado.prototype.Cerrar = function() {
var _this = this;
setTimeout(function() {
_this.elDiv.style.display = 'none';
_this.elDiv.innerHTML = '';
_this.peticiones = 0;
}, 200);
}
</script>
</head>
<body>
<form method="post" action="">
Nombre: <input type="text" name="txt" id="txt1" class="autocomplete" value="" autocomplete="off" tabindex="1" />
<br /><br />
Nombre: <input type="text" name="txt" id="txt2" class="autocomplete" value="" autocomplete="off" tabindex="2" />
</form>
<ul id="contenedorOpt"></ul>
</body>
</html>