26/10/2013, 13:51
|
 | Colaborador | | Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses Puntos: 1012 | |
| Respuesta: [APORTE] efectos sin jquery
Autocomplete----> compatibilidad : todos los navegadores modernos incluido ie8
Código:
<!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 ol {
list-style-type: none;
}
#contenedorOpt li {
font: 1em verdana;
text-align: left;
}
#contenedorOpt li.noseleccionado {
color: rgb(0, 0, 0);
padding: 2px 5px;
}
#contenedorOpt li.seleccionado {
border: 1px solid rgb(95, 82, 82);
border-radius: 5px;
margin: 1px;
padding: 0 3px;
cursor: default;
background: rgb(219, 215, 215);
color: rgb(9, 8, 8);
}
#contenedorOpt span {
color: rgb(0, 0, 0);
font-weight: bold;
padding: 0 28px;
}
</style>
<script type="text/javascript">
var lib = {
Evento : function(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, fnc, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento, window.event);});
}
},
EventoCancelar : function (evt) {
var evt = evt || window.event;
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
},
elemAdyacente : function(elm, adj) {
if (adj == 'nxt') {
var elemento = elm.nextElementSibling || elm.nextSibling.nextSibling;
} else {
var elemento = null;
}
if (elemento == null) {
return null;
} else {
return elemento;
}
},
posicionAbsolutaElemento : function(elem) {
if (!elem) return { top : 0, left : 0 };
var x = 0;
var y = 0;
while (elem.offsetParent) {
x += elem.offsetLeft;
y += elem.offsetTop;
elem = elem.offsetParent;
}
return {top : y, left : x};
},
}
var autoCompletado = {
elTxtBoxRaton : '',
creaAjax: function() {
var ajax = new XMLHttpRequest();
return ajax;
},
ajax : null,
init: function() {
var inpt = document.querySelectorAll('.autocomplete');
for (var i = 0; i < inpt.length; i++) {
lib.Evento(inpt[i], 'keyup', function(event) {autoCompletado.autoCompletaPulsacion(event, this)});
lib.Evento(inpt[i], 'paste', function() {autoCompletado.copypasteRaton(this)});
lib.Evento(inpt[i], 'keydown', autoCompletado.pegarConEnteryTab);
lib.Evento(inpt[i], 'blur', autoCompletado.Cerrar);
}
lib.Evento(document.getElementById('contenedorOpt'), 'mouseover', function() {autoCompletado.Seleccionar(this)});
},
autoCompletaPulsacion: function (ev, elTxtBox) {
autoCompletado.elTxtBoxRaton = elTxtBox;
var str = elTxtBox.value;
var elDiv = document.getElementById('contenedorOpt');
if (str.length <= 2) {
elDiv.innerHTML = '';
elDiv.style.display = 'none';
return;
}
var keyCode = (ev) ? ev.keyCode : ev.charCode;
if (keyCode == 40) { // flecha abajo
autoCompletado.BajaOpt(elDiv);
} else if (keyCode == 38) { // flecha arriba
autoCompletado.SubeOpt(elDiv);
} else if (keyCode == 13) { // enter
lib.EventoCancelar(ev);
} else {
var PosElemento = lib.posicionAbsolutaElemento(elTxtBox);
var posicionInicialLeft = parseInt(PosElemento.left);
var posicionInicialTop = parseInt(PosElemento.top);
lib.elemAdyacente(elTxtBox, 'nxt').innerHTML = '<img src="./precarga.gif" />';
autoCompletado.ajax = autoCompletado.creaAjax();
var url = 'SelecUsuarios.php?busca=' + str;
autoCompletado.ajax.open('GET', url, true);
autoCompletado.ajax.onreadystatechange = function() {
if (!autoCompletado.ajax || autoCompletado.ajax == null) { return; }
if (autoCompletado.ajax.readyState == 4) {
if (autoCompletado.ajax.status == 200) {
elDiv.innerHTML = autoCompletado.ajax.responseText;
lib.elemAdyacente(elTxtBox, 'nxt').innerHTML = '';
autoCompletado.Desplieaga(posicionInicialLeft, posicionInicialTop, elDiv);
autoCompletado.ajax.onreadystatechange = function(){};
autoCompletado.ajax.abort();
autoCompletado.ajax = null;
}
}
}
autoCompletado.ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
autoCompletado.ajax.send(null);
return;
}
},
copypasteRaton: function(elTxtBox) {
setTimeout(function() {autoCompletado.autoCompletaRaton(elTxtBox)}, 0);
},
autoCompletaRaton: function (elTxtBox) {
autoCompletado.elTxtBoxRaton = elTxtBox;
var str = elTxtBox.value;
var elDiv = document.getElementById('contenedorOpt');
if (str.length <= 2) { return; }
var PosElemento = lib.posicionAbsolutaElemento(elTxtBox);
var posicionInicialLeft = parseInt(PosElemento.left);
var posicionInicialTop = parseInt(PosElemento.top);
lib.elemAdyacente(elTxtBox, 'nxt').innerHTML = '<img src="./precarga.gif" />';
autoCompletado.ajax = autoCompletado.creaAjax();
var url = 'SelecUsuarios.php?busca=' + str;
autoCompletado.ajax.open('GET', url, true);
autoCompletado.ajax.onreadystatechange = function() {
if (!autoCompletado.ajax || autoCompletado.ajax == null) { return; }
if (autoCompletado.ajax.readyState == 4) {
if (autoCompletado.ajax.status == 200) {
elDiv.innerHTML = autoCompletado.ajax.responseText;
lib.elemAdyacente(elTxtBox, 'nxt').innerHTML = '';
autoCompletado.Desplieaga(posicionInicialLeft, posicionInicialTop, elDiv);
autoCompletado.ajax.onreadystatechange = function(){};
autoCompletado.ajax.abort();
autoCompletado.ajax = null;
}
}
}
autoCompletado.ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
autoCompletado.ajax.send(null);
return;
},
Desplieaga: function(posLeft, posTop, elDiv) {
if (autoCompletado.elTxtBoxRaton.value.length >= 3) {
elDiv.style.left = posLeft + 'px';
elDiv.style.top = parseInt(posTop + 22) + 'px';
elDiv.style.display = 'block';
} else {
elDiv.innerHTML = '';
elDiv.style.display = 'none';
}
},
Seleccionar: function(contenedoropts) {
var opt = contenedoropts.getElementsByTagName('li');
for (var i = 0; i < opt.length; i++) {
lib.Evento(opt[i], 'mouseover', function() {
autoCompletado.Marcar(this);
})
lib.Evento(opt[i], 'click', function() {
autoCompletado.pegarConRaton(this.innerHTML, contenedoropts);
})
}
},
Marcar: function(sel) {
var opt = document.getElementById('contenedorOpt').getElementsByTagName('li');
for (var i = 0; i < opt.length; i++) {
if (opt[i].className == 'seleccionado') {
opt[i].className = 'noseleccionado';
sel.className = 'seleccionado';
break;
}
}
},
BajaOpt: function(contenedoropts) {
var opt = contenedoropts.getElementsByTagName('li');
for (var i = 0; i <= opt.length-1; i++) {
if (opt[i].className == 'seleccionado') {
opt[i].className = 'noseleccionado';
if (i < opt.length-1) {
i++;
} else {
i = 0;
}
opt[i].className = 'seleccionado';
}
}
},
SubeOpt: function(contenedoropts) {
var opt = contenedoropts.getElementsByTagName('li');
for (var i = 0; i <= opt.length-1; i++) {
if (opt[i].className == 'seleccionado') {
opt[i].className = 'noseleccionado';
if (i < opt.length && i > 0) {
i--;
} else {
i = opt.length-1;
}
opt[i].className = 'seleccionado';
}
}
},
pegarConRaton: function(valor, contenedoropts) {
var elDiv = contenedoropts;
autoCompletado.elTxtBoxRaton.value = valor.replace(/<[^>]+>/g, '');
if (elDiv.style.display == 'block') {
elDiv.style.display = 'none';
elDiv.innerHTML = '';
}
},
pegarConEnteryTab: function(ev) {
var elDiv = document.getElementById('contenedorOpt');
var opt = elDiv.getElementsByTagName('li');
var keyCode = (ev) ? ev.keyCode : ev.charCode;
if ((keyCode == 13) || (keyCode == 9)) {
for (var i = 0; i <= opt.length-1; i++) {
if (opt[i].className == 'seleccionado') {
this.value = opt[i].innerHTML.replace(/<[^>]+>/g, '');
if (elDiv.style.display == 'block') {
elDiv.style.display = 'none';
elDiv.innerHTML = '';
}
break;
}
}
if (keyCode == 13) {
lib.EventoCancelar(ev);
}
}
},
Cerrar: function() {
setTimeout(autoCompletado.CerrarAhora, 1000);
},
CerrarAhora: function() {
var elDiv = document.getElementById('contenedorOpt');
if (elDiv.style.display == 'block') {
elDiv.style.display = 'none';
elDiv.innerHTML = '';
}
}
}
lib.Evento(window, 'load', autoCompletado.init);
</script>
</head>
<body>
<form method="post" action="">
Nombre: <input type="text" name="txt" id="txt1" class="autocomplete" value="" autocomplete="off" tabindex="1" />
<span class="buscando"></span>
<br /><br />
Nombre: <input type="text" name="txt" id="txt2" class="autocomplete" value="" autocomplete="off" tabindex="2" />
<span class="buscando"></span>
</form>
<div id="contenedorOpt"></div>
</body>
</html>
la parte php en el siguiente post
Última edición por IsaBelM; 25/08/2014 a las 14:40 |