Ver Mensaje Individual
  #34 (permalink)  
Antiguo 26/10/2013, 13:51
Avatar de IsaBelM
IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 1 mes
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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 25/08/2014 a las 14:40