<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body,input {font-family:Arial;font-size:14px;} input {padding:5px;} #list>div {padding:3px;}
.hide {display:none;} </style>
</head>
<body>
<div>
<input type="text" value="" id="buscar" placeholder="buscar un pais">
</div>
<div id="list"></div>
</body>
</html>
<script>
arrayValores=['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', 'S 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'];
var lista=document.getElementById("list");
// añadimos los paises a la lista
arrayValores.sort().forEach(function(k) {
// creamos un elemento div
var div=document.createElement("div");
// añadimos el texto al nuevo elemento div creado
var contenido=document.createTextNode(" - "+k); div.appendChild(contenido);
// creamos el dataset "buscar", que sera donde se buscara el pais, ya que en
// el texto se puede encontrar codigo html o otros caracteres
div.dataset.buscar=k;
// añadimos el elemento a la lista
lista.append(div);
});
// creamos un evento para cada vez que se suelte una tecla en el cuadro de busqueda
document.getElementById("buscar").addEventListener("keyup",function() {
// cojemos el contenido del cuadro de busqueda
var texto=this.value;
// recorremos toda la lista de paises
lista.querySelectorAll("div").forEach(function(e){ if(texto=="") {
// si no hay ningun texto, quitamos el estilo "hide" a todos
e.classList.remove("hide"); }else{
// buscamos desde el inicio del nombre del pais
//var re=new RegExp("^"+texto+"+", "i");
// buscamos en cualquier posición dentro del nombre del pais
var re=new RegExp(texto+"+", "i");
if(re.test(e.dataset.buscar)) { // si hay alguna coincidencia, eliminamos el estilo "hide"
e.classList.remove("hide"); }else{ // añadims el estilo "hide" para ocultar el pais
e.classList.add("hide"); }
}
})
})
</script>
Comentarios sobre la versión: Versión 1 (2)