Buscar y filtrar en un ListBox con Javascript

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este es un sencillo código javascript que te permitirá implementar en tus formularios, la opción para poder buscar y filtrar en un Listbox o caja de listado, cualquier elemento en la lista. El filtro o búsqueda se realiza al escribir en una caja de texto.

Mas información sobre el programa.

El ejemplo de demostración contiene una lista de países, como se puede ver en la siguiente captura de pantalla :

Pegar Código fuente en una página HTML

<head>  <meta http-equiv="Content-Type" content="text/html; charset=" /> <title>Search Listbox Items</title> <script type="text/javascript">  var List=new CreateList("Country", 5, 200) List.Add("Afghanistan"); List.Add("Albania"); List.Add("Algeria"); List.Add("American Samoa"); List.Add("Andorra"); List.Add("Angola"); List.Add("Anguilla (BWI)"); List.Add("Antartica"); List.Add("Antigua & Barbuda (BWI)"); List.Add("Argentina"); List.Add("Armenia"); List.Add("Aruba (Neth. Antilles)"); List.Add("Australia"); List.Add("Austria"); List.Add("Azerbaijan"); List.Add("Bahamas"); List.Add("Bahrain"); List.Add("Bangladesh"); List.Add("Barbados (BWI)"); List.Add("Belarus"); List.Add("Belgium"); List.Add("Belize (Br. Honduras)"); List.Add("Benin (Dahomey)"); List.Add("Bermuda"); List.Add("Bhutan"); List.Add("Bolivia"); List.Add("Bosnia-Herzegovina"); List.Add("Botswana"); List.Add("Bouvet Island"); List.Add("Brazil"); List.Add("British Virgin Islands"); List.Add("Brunei Darussalam"); List.Add("Bulgaria"); List.Add("Burkina Faso"); List.Add("Burundi"); List.Add("Cambodia (Kampuchea)"); List.Add("Cameroon"); List.Add("Canada"); List.Add("Cape Verde Islands"); List.Add("Cayman Islands (BWI)"); List.Add("Central African Rep."); List.Add("Chad"); List.Add("Chile"); List.Add("China, Peoples Rep."); List.Add("Christmas Is. (Indian)"); List.Add("Christmas Is. (Pacific)"); List.Add("Cocos - Keeling Is."); List.Add("Columbia"); List.Add("Comoros, F & I Rep."); List.Add("Congo, Rep. of (Zaire)"); List.Add("Cook Islands (Rarotonga)"); List.Add("Costa Rica"); List.Add("Cote D'Ivoire"); List.Add("Croatia"); List.Add("Cuba"); List.Add("Cyprus"); List.Add("Czech Republic"); List.Add("Czechoslovakia"); List.Add("Denmark"); List.Add("Djibouti Rep."); List.Add("Dominica (BWI)"); List.Add("Dominican Republic"); List.Add("East Timor"); List.Add("Ecuador"); List.Add("Egypt, Arab Rep. of"); List.Add("El Salvador"); List.Add("Equatorial Guinea"); List.Add("Estonia"); List.Add("Ethiopia"); List.Add("Falkland Islands"); List.Add("Faroe (Faeroe) Is."); List.Add("Fiji Islands (Suva)"); List.Add("Finland"); List.Add("France"); List.Add("French Guiana"); List.Add("French Polynesia"); List.Add("French Southern Territory"); List.Add("Gabon Rep."); List.Add("Gambia"); List.Add("Georgia"); List.Add("Germany"); List.Add("Ghana"); List.Add("Gibraltar"); List.Add("Greece"); List.Add("Greenland"); List.Add("Grenada (BWI)"); List.Add("Grenadines & St. Vinc."); List.Add("Guadeloupe (Fr. Ant.)"); List.Add("Guam"); List.Add("Guatemala"); List.Add("Guinea People Rep."); List.Add("Guinea-Bissau"); List.Add("Guyana"); List.Add("Haiti"); List.Add("Heard and Mc Donald Is."); List.Add("Honduras, Rep. of"); List.Add("Hong Kong"); List.Add("Hungary"); List.Add("Iceland"); List.Add("India"); List.Add("Indonesia"); List.Add("Iran"); List.Add("Iraq"); List.Add("Ireland"); List.Add("Israel"); List.Add("Italy"); List.Add("Jamaica (BWI)"); List.Add("Japan"); List.Add("Jordan"); List.Add("Kazakhstan"); List.Add("Kenya"); List.Add("Kirgistan"); List.Add("Kiribati Rep."); List.Add("Korea, North"); List.Add("Korea, Rep. of (South)"); List.Add("Kuwait"); List.Add("Laos, Peoples Dem. Rep. of"); List.Add("Latvia"); List.Add("Lebanon"); List.Add("Lesotho"); List.Add("Liberia"); List.Add("Libyan Arab Jamahiriya"); List.Add("Liechtenstein"); List.Add("Lithuania"); List.Add("Luxembourg"); List.Add("Macao (Macau)"); List.Add("Macedonia"); List.Add("Madagascar, Dem. Rep."); List.Add("Malawi"); List.Add("Malaysia"); List.Add("Maldives"); List.Add("Mali, Rep. of"); List.Add("Malta"); List.Add("Marshall Is."); List.Add("Martinique (French Ant.)"); List.Add("Mauritania, Islamic Rep."); List.Add("Mauritius Is."); List.Add("Mexico"); List.Add("Micronesia"); List.Add("Moldavia"); List.Add("Monaco"); List.Add("Mongolian Peoples Rep."); List.Add("Montserrat (BWI)"); List.Add("Morocco"); List.Add("Mozambique"); List.Add("Myanmar, Union of"); List.Add("Nauru"); List.Add("Nepal"); List.Add("Netherland Antilles"); List.Add("Netherlands"); List.Add("Neutral Zone"); List.Add("New Caledonia"); List.Add("New Zealand"); List.Add("Nicaragua"); List.Add("Niger Rep."); List.Add("Nigeria, Fed. Rep."); List.Add("Niue Is."); List.Add("Norfolk Island"); List.Add("Northern Mariana Is."); List.Add("Norway"); List.Add("Oman"); List.Add("Pakistan"); List.Add("Palau"); List.Add("Panama"); List.Add("Papua New Guinea"); List.Add("Paraguay"); List.Add("Peru"); List.Add("Philippines"); List.Add("Pitcairn Island"); List.Add("Poland"); List.Add("Portugal, Madeira & Azores"); List.Add("Puerto Rico"); List.Add("Qatar"); List.Add("Reunion Is."); List.Add("Romania"); List.Add("Russia"); List.Add("Russia (Formerly USSR)"); List.Add("Rwanda"); List.Add("Samoa, Western"); List.Add("San Marino"); List.Add("Sao Tome & Principe"); List.Add("Saudi Arabia"); List.Add("Senegal Rep."); List.Add("Seychelles Is."); List.Add("Sierra Leone"); List.Add("Singapore, Rep. of"); List.Add("Slovakia"); List.Add("Slovenia"); List.Add("Solomon Is."); List.Add("Somali Rep."); List.Add("South Africa, Rep. of"); List.Add("Southwest Africa/Namibia"); List.Add("Spain"); List.Add("Sri Lanka (Ceylon)"); List.Add("St. Helena"); List.Add("St. Kitts - Nevis (BWI)"); List.Add("St. Lucia (BWI)"); List.Add("St. Pierre/Miquelon Is."); List.Add("Sudan"); List.Add("Suriname, Rep. of"); List.Add("Svalbard & Jan Mayen Is."); List.Add("Swaziland"); List.Add("Sweden"); List.Add("Switzerland"); List.Add("Syrian Arab Rep."); List.Add("Tadjikistan"); List.Add("Taiwan (Rep. of China)"); List.Add("Tanzania (Zanzibar)"); List.Add("Thailand"); List.Add("Togolese Rep."); List.Add("Tokelau Is."); List.Add("Tonga Is."); List.Add("Trinidad & Tobago (BWI)"); List.Add("Tunisia"); List.Add("Turkey"); List.Add("Turkmenistan"); List.Add("Turks & Caicos Is."); List.Add("Tuvalu (Ellice Is.)"); List.Add("Uganda"); List.Add("Ukraine"); List.Add("United Arab Emirates"); List.Add("United Kingdom"); List.Add("United States"); List.Add("Uruguay"); List.Add("Uzbekistan"); List.Add("Vanuatu (New Hebrides)"); List.Add("Vatican City"); List.Add("Venezuela"); List.Add("Vietnam"); List.Add("Virgin Is., U.S."); List.Add("Wallis & Futuna Is."); List.Add("Western Sahara"); List.Add("Yemen"); List.Add("Yugoslavia"); List.Add("Zaire, Rep. of"); List.Add("Zambia"); List.Add("Zimbabwe (Rhodesia)"); function CreateList(name, height, width) { this.name=name; this.height=height; this.width=width; this.search=""; this.nb=0; this.Add=AddItem; this.Show=ShowList; this.UPDATE=UPDATEList; } function AddItem(item) { this[this.nb]=item this.nb++; } function ShowList() { if (document.layers) { var Z="<SELECT name="+this.name+" size="+this.height+">"; } else { var Z="<SELECT name="+this.name+" size="+this.height+" style='width:"+this.width+"'>"; } for (var i=0; i<this.nb; i++) { Z+="<OPTION value=\""+this[i]+"\">"+this[i]+"</OPTION>" } Z+="</SELECT>" document.write(Z); } function UPDATEList(txt,f) { if (txt!=this.search) { this.search=txt f.elements[this.name].options.length=0; for (var i=0; i<this.nb; i++) { if ( this[i].substring(0,txt.length).toUpperCase()==txt.toUpperCase() ) { var o=new Option(this[i], this[i]); f.elements[this.name].options[f.elements[this.name].options.length]=o; } } if (f.elements[this.name].options.length==1) { f.elements[this.name].selectedIndex=0; } } } function ListCheck() { List.UPDATE(document.forms["myform"].search.value,document.forms["myform"]) if (document.layers) { setTimeout("ListCheck()", 1001) } else { setTimeout("ListCheck()", 100) } } </script> </head> <FORM name="myform"> Escribir Aquí: <input type="text" name="search" /><br /> <br /> <script type="text/javascript"> List.Show(); ListCheck(); </script> </FORM>