Código de JQuery - Autocompletar desde un array de valores con JQuery

Imágen de perfil
Val: 293
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Autocompletar desde un array de valores con JQuerygráfica de visualizaciones


JQuery

Actualizado el 22 de Septiembre del 2019 por Xavi (548 códigos) (Publicado el 4 de Octubre del 2016)
4.299 visualizaciones desde el 4 de Octubre del 2016
Este código muestra los países a medida que se va escribiendo en un cuadro de texto, permitiendo seleccionar cualquier país del listado que se va mostrando a medida que se va escribiendo.
Cada vez que se selecciona un país, se crea una nueva caja con el país seleccionado, permitiendo eliminarlo de la selección.

autocompletar-1

autocompletar-2

autocompletar-3

autocompletar-4


He creado la misma versión con JavaScript sin utilizar jquery.
La versión con JavaScript: https://www.lawebdelprogramador.com/codigo/JavaScript/5545-Autocompletar-desde-un-array-de-valores-con-JavaScript.html

Versión 1.0
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 4 de Octubre del 2016gráfica de visualizaciones de la versión: Versión 1.0
4.300 visualizaciones desde el 4 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Autocompletar desde un array de valores</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
 
	<style>
	body {
		font-family:Arial;
		font-size:14px;
	}
 
	.autocompletar input {
		padding:5px;
		font-size: 14px;
	}
	.autocompletar ul {
		background-color:white;
		border:1px solid #ccc;
		display:none;
		margin:0px;
		padding:0px;
		position:absolute;
		width:300px;
	}
	.autocompletar ul li {
		border-bottom:1px solid #ccc;
		list-style:none;
		padding:3px;
		cursor:pointer;
	}
	.autocompletar ul li:last-child {
		border-bottom:none;
	}
	.autocompletar ul li:hover {
		background-color:#ccc;
	}
	#tags {
		margin-top:20px;
	}
	#tags>div {
		background-color:#f0f0f0;
		border:1px solid #ccc;
		display:inline-block;
		margin-right:5px;
		padding:3px 5px;
	}
	#tags>div>span {
		background-color:#ccc;
		border-radius:10px;
		cursor:pointer;
		display:inline-block;
		font-size:12px;
		margin-left:7px;
		padding:3px;
		text-align:center;
		width:15px;
	}
	</style>
</head>
 
<body>
 
	<div class="autocompletar">
		<input type="text" value="">
		<ul></ul>
	</div>
 
	<div id="tags"></div>
</body>
</html>
 
<script>
// variable que contendra el valor del input cuando se pulse una tecla
var valueAutocompletar="";
 
// array que contendra los valores seleccionados por el usuario
var valoresSeleccionados=new Array();
 
$(document).ready(function(){
 
	// Ordenamos el array para mostrar los datos ordenados
	var sorted=arrayValores.sort();
 
	// En cada pulsacion de una tecla, buscamos las posibles coincidencias
	$(".autocompletar input[type=text]").keyup(function(e){
		// Si se ha pulsado la tecla enter
		if(e.which==13)
		{
 
			// Comprovamos que el valor escrito en el formulario exista en el array
			// de valores, y que no este ya en el array de valores seleccionados.
			if(sorted.indexOf($(this).val())!=-1 && valoresSeleccionados.indexOf($(this).val())==-1)
			{
				valoresSeleccionados.push($(this).val());
				$(this).parent().find("ul").hide();
				showTags();
			}
		}else{
			buscar($(this));
		}
	});
 
	/**
	 * Funcion que busca el texto introducido en el array de valores
	 * Tiene que recibir el objeto donde se encuentra la cadena a buscar
	 */
	function buscar(objeto)
	{
		objeto.css("color","Black");
 
		valueAutocompletar=objeto.val();
		if(valueAutocompletar)
		{
 
			// Buscamos el indice del primer elemento del array
			var positionStart=sorted.findIndex(findMyWord);
			if(positionStart>=0)
			{
				var li="";
				var re=new RegExp("^"+valueAutocompletar+"+", "i");
 
				// Recorremos el array de valores desde la primera posición del
				// array que tiene una coincidencia
				for(var i=positionStart;i<sorted.length;i++)
				{
 
					// Si el texto coincide con el inicio del valor del array
					// lo mostraremos
					if(re.test(sorted[i]))
						li+="<li>"+sorted[i]+"</li>";
					else
						break;
				}
				objeto.parent().find("ul").html(li).show();
 
				// Evento que se ejecuta cuando se pulsa con el raton sobre un
				// elemento de la lista
				$(".autocompletar ul li").unbind("click").click(function(){
 
					// Comprovamos que el elemento seleccionado se encuentre ya
					// en el array de valores seleccionados
					if(valoresSeleccionados.indexOf($(this).html())==-1)
					{
						// Añadimos el elemento al array
						valoresSeleccionados.push($(this).html());
						showTags();
					}
				});
			}else{
				objeto.parent().find("ul").hide();
				objeto.css("color","Red");
			}
		}else{
			objeto.parent().find("ul").hide();
		}
	}
 
	// Evento que se ejecuta cuando el cuadro de texto obtiene el foco
	// para mostrar la lista de opciones si las hay
	$(".autocompletar input[type=text]").focus(function(){
		if($(this).val()!="")
		{
			buscar($(this));
 
			// Seleccionamos todo el texto del cuadro de texto
			$(this).select();
		}
	});
 
	// Evento que se ejecuta cuando se pulsa en el documento para esconder la
	// lista de opciones
	$(document).click(function(){
 
		// Se esconde la lista si no estamos en el cuadro de texto
		if($(".autocompletar input[type=text]").is(":focus")==false)
		{
			$(".autocompletar").find("ul").hide();
		}
	});
});
 
/**
 * Función llamada desde el findIndex para buscar la primera coincidencia del
 * texto escrito con el array de valores.
 * Si se ha escrito "pa", devolvera el primer elemento que empiece por "pa", por
 * ejemplo: "pagina"
 */
function findMyWord(element)
{
	var re=new RegExp("^"+valueAutocompletar+"+","i");
	if(re.test(element))
		return true;
	return false;
}
 
/**
 * Función para mostrar los tags y crear el evento para eliminarlos
 */
function showTags()
{
	// Eliminamos los tags que se muestran en la web
	$("#tags").html("");
 
	// Ordenamos los tags seleccionados
	var valoresSeleccionadosSorted=valoresSeleccionados.sort();
 
	for(var i=0;i<valoresSeleccionadosSorted.length;i++)
	{
		// Añadimos cada uno de los tags en la web
		$("#tags").append("<div>"+valoresSeleccionadosSorted[i]+"<span id='"+valoresSeleccionadosSorted[i]+"'>X</span></div>");
	}
 
	// Creamos el evento para eliminar cualquier tag
	$("#tags span").unbind("click").click(function(){
 
		// Eliminamos el tag del array de valores
		valoresSeleccionados.splice( valoresSeleccionados.indexOf($(this).attr("id")), 1 );
 
		// Eliminamos el tag de la web
		$(this).parent().remove();
	});
}
 
var arrayValores=Array("Afghanistan", "Albania", "Argelia", "Alemania", "American Samoa", "Andorra", "Angola", "Anguilla", "Antartida", "Antigua y Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia-Herzegovina", "Botswana", "Bouvet Island", "Brasil", "Brit Ind Ocean Territory", "Brunei Darussalm", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Canary Islands", "Cape Verde", "Caymen Islands", "Central African Rep", "Chad", "Chile", "China", "Christmas Islands", "Cocos Islands", "Colombia", "Comoros", "Congo", "Cook Islands", "Costa Rica", "Croatia", "Cuba", "Chipre", "Dem Rep. of Korea", "Dinamarca", "Djibouti", "Dominica", "East Timor", "Ecuador", "Egipto", "El Salvador", "Eritrea", "España", "Estados Unidos de America", "Estonia", "Etiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "Francia", "Guiana Francesa", "Polynesia Francesa", "French So. Territories", "Gabon", "Gambia", "Georgia", "Ghana", "Gibraltar", "Guinea Equatorial", "Grecia", "Greenland", "Grenada", "Guadalupe", "Guatemala", "Guinea", "Guinea Bissau", "Guyana", "Haiti", "Heard, McDonald Island", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Inglaterra", "Iran", "Iraq", "Ireland", "Islas Filipinas", "Israel", "Italia", "Ivory Coast", "Jamaica", "Japon", "Jordan", "Kazakhistan", "Kenia", "Kiribati", "Korea del Norte", "Kuwait", "Kyrqyzstan", "Laos", "Lativa", "Libano", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Madagascar", "Malawi", "Malaysia", "Maldivas", "Mali", "Malta", "Mariana Islands", "Marruecos", "Marshall Islands", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montserrat", "Mozambique", "Myanmar", "Nambia", "Nauru", "Nepal", "Netherland Antilles", "Netherlands", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue Island", "Norfolk Island", "Northern Mariana Island", "Norway", "OCE", "Oman", "Pacific Islands", "Pakistan", "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Pitcairn", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reino Unido", "Republica de Corea", "Republica Dominicana", "Reunion", "Romania", "Russian Federation", "Rwanda", "South Georgia Sandwich", "Saint Pierre Miguelon", "Samoa", "San Marino", "Sao Tomee and Principe", "Saudi Arabia", "Senegal", "Seychelles", "Sierre Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somali Republic", "South Africa", "South Korea", "Sri Lanka", "St. Helena", "St. Kits-Nevis", "St. Lucia", "St. Vincent/Grenadines", "Sudan", "Suriname", "Svalbard Jan Mayen", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tokeelau", "Tonga", "Trinidad Tobago", "Tunisia", "Turquia", "Turkmenistan", "Turks Caicos Islands", "Tuvalu", "Uganda", "Ukrania", "United Arab Emirates", "Uruguay", "US Minor Outlying Is.", "Uzbekistan", "Vanuatu", "Vatican City State", "Venezuela", "Vietnam", "Virgin Islands: British", "Virgin Islands: US", "Wallis Futuna Islands", "Western Sahara", "Western Samoa", "Yemen", "Yugoslavia", "Zaire", "Zambia", "Zimbabwe");
</script>



Comentarios sobre la versión: Versión 1.0 (4)

12 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
por que por que usas el maldito jquery !! por que!! bnno me gusta ya que el codigo es facil en si casi no cambia
Responder
Imágen de perfil
22 de Septiembre del 2019
estrellaestrellaestrellaestrellaestrella
Un poco tarde, pero ya he creado la versión para JavaScript... espero que te guste!!!

https://www.lawebdelprogramador.com/codigo/JavaScript/5545-Autocompletar-desde-un-array-de-valores-con-JavaScript.html
Responder
Imágen de perfil
21 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
¡Buen diseño!. Bastante útil...

Un saludo
Responder
Imágen de perfil
22 de Septiembre del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3694