JavaScript - Filter für HTML-Listenelemente

Oft benötigt man eine Filter-Funktion für lange Listen von Einträgen. Die schnell den gewünschten Eintrag heraus filtern kann.

Afrika
  1. Abidjan
  2. Accra
  3. Addis Ababa
  4. Algier
  5. Asmara
  6. Asmera
  7. Bamako
  8. Bangui
  9. Banjul
  10. Bissau
  11. Blantyre
  12. Brazzaville
  13. Bujumbura
  14. Casablanca
  15. Ceuta
  16. Conakry
  17. Dakar
  18. Daressalaam
  19. Douala
  20. Dschibuti
  21. El Aaiun
  22. Freetown
  23. Gaborone
  24. Harare
  25. Johannesburg
  26. Kairo
  27. Kampala
  28. Khartum
  29. Kigali
  30. Kinshasa
  31. Lagos
  32. Libreville
  33. Lomé
  34. Luanda
  35. Lubumbashi
  36. Lusaka
  37. Malabo
  38. Maputo
  39. Maseru
  40. Mbabane
  41. Mogadishu
  42. Monrovia
  43. Nairobi
  44. Ndjamena
  45. Niamey
  46. Nouakchott
  47. Ouagadougou
  48. Porto-Novo
  49. Sao Tome
  50. Timbuktu
  51. Tripolis
  52. Tunis
  53. Windhoek
Amerika
  1. Adak
  2. Anchorage
  3. Anguilla
  4. Antigua
  5. Araguaina
  6. Argentinien - Buenos Aires
  7. Argentinien - Catamarca
  8. Argentinien - ComodRivadavia
  9. Argentinien - Cordoba
  10. Argentinien - La Rioja
  11. Argentinien - Mendoza
  12. Argentinien - Rio Gallegos
  13. Argentinien - Salta
  14. Argentinien - San Juan
  15. Argentinien - San Luis
  16. Argentinien - San Miguel de Tucuman
  17. Argentinien - San Salvador de Jujuy
  18. Argentinien - Ushuaia
  19. Aruba
  20. Asuncion
  21. Atikokan
  22. Atka
  23. Bahia
  24. Barbados
  25. Belem
  26. Belize
  27. Blanc-Sablon
  28. Boa Vista
  29. Bogota
  30. Boise
  31. Buenos Aires
  32. Cambridge Bay
  33. Campo Grande
  34. Cancún
  35. Caracas
  36. Catamarca
  37. Cayenne
  38. Chicago
  39. Chihuahua
  40. Coral Harbour
  41. Cordoba
  42. Costa Rica
  43. Cuiaba
  44. Curacao
  45. Danmarkshavn
  46. Dawson
  47. Dawson Creek
  48. Denver
  49. Detroit
  50. Dominica
  51. Edmonton
  52. Eirunepe
  53. El Salvador
  54. Ensenada
  55. Fortaleza
  56. Fort Wayne
  57. Glace Bay
  58. Goose Bay
  59. Grand Turk
  60. Grenada
  61. Guadeloupe
  62. Guatemala
  63. Guayaquil
  64. Guyana
  65. Halifax
  66. Havanna
  67. Hermosillo
  68. Indiana - Indianapolis
  69. Indiana - Knox
  70. Indiana - Marengo
  71. Indiana - Petersburg
  72. Indiana - Tell City
  73. Indiana - Vevay
  74. Indiana - Vincennes
  75. Indiana - Winamac
  76. Indianapolis
  77. Inuvik
  78. Iqaluit
  79. Ittoqqortoormiit
  80. Jamaica
  81. Juneau
  82. Jungferninseln
  83. Kaimaninseln
  84. Kentucky - Louisville
  85. Kentucky - Monticello
  86. Knox Indiana
  87. La Paz
  88. Lima
  89. Los Angeles
  90. Louisville
  91. Maceio
  92. Managua
  93. Manaus
  94. Marigot
  95. Martinique
  96. Mazatlan
  97. Mendoza
  98. Menominee
  99. Mexico Stadt
  100. Miquelon
  101. Moncton
  102. Monterrey
  103. Montevideo
  104. Montreal
  105. Montserrat
  106. Morrell-Inseln
  107. Mérida
  108. Nassau
  109. New York
  110. Nipigon
  111. Nome
  112. Nord Dakota - New Salem
  113. Nord Dakota - Zentriert
  114. Noronha
  115. Nuuk
  116. Panama
  117. Pangnirtung
  118. Paramaribo
  119. Phoenix
  120. Port-au-Prince
  121. Port-of-Spain
  122. Porto Acre
  123. Porto Velho
  124. Puerto Rico
  125. Rainy River
  126. Rankin Inlet
  127. Recife
  128. Regina
  129. Resolut
  130. Rio Branco
  131. Rosario
  132. Saint Barthelemy
  133. Saint Johns
  134. Saint Vincent
  135. San Salvador de Jujuy
  136. Santarem
  137. Santiago
  138. Santo Domingo
  139. Sao Paulo
  140. Shiprock
  141. St Kitts
  142. St Lucia
  143. St Thomas
  144. Swift Current
  145. Tegucigalpa
  146. Thunder Bay
  147. Tijuana
  148. Toronto
  149. Tortola
  150. Vancouver
  151. Whitehorse
  152. Winnipeg
  153. Yakutat
  154. Yellowknife
Antarktis
  1. Casey-Station
  2. Davis-Station
  3. Dumont-d’Urville-Station
  4. Mawson-Station
  5. McMurdo Station
  6. Palmer (Alaska)
  7. Rothera-Station
  8. Showa-Station
  9. Südpol
  10. Wladiwostok
Arktis
  1. Longyearbyen
Asien
  1. Aden
  2. Almaty
  3. Amman
  4. Anadyr
  5. Aqtöbe
  6. Aqtau
  7. Asgabat
  8. Askhabad
  9. Bagdad
  10. Bahrain
  11. Baku
  12. Bangkok
  13. Beirut
  14. Bischkek
  15. Brunei
  16. Chongqing
  17. Chongqing
  18. Chowd
  19. Colombo
  20. Damaskus
  21. Dhaka
  22. Dili
  23. Dubai
  24. Duschanbe
  25. Eriwan
  26. Gaza
  27. Harbin
  28. Ho-Chi-Minh-Stadt
  29. Hong Kong
  30. Irkutsk
  31. Istanbul
  32. Jakarta
  33. Jakutsk
  34. Jayapura
  35. Jekaterinburg
  36. Jerusalem
  37. Kabul
  38. Kalkutta
  39. Kamtschatka
  40. Karatschi
  41. Katar
  42. Kathmandu
  43. Kaxgar
  44. Kolkata
  45. Krasnojarsk
  46. Kuala Lumpur
  47. Kuching
  48. Kuwait
  49. Macao
  50. Macau
  51. Magadan
  52. Makassar
  53. Manila
  54. Maskat
  55. Nikosia
  56. Novokuznetsk
  57. Novosibirsk
  58. Omsk
  59. Oral
  60. Phnom Penh
  61. Pjöngjang
  62. Pontianak
  63. Qysylorda
  64. Rangun
  65. Riad
  66. Sachalin
  67. Saigon
  68. Samarkand
  69. Seoul
  70. Shanghai
  71. Singapur
  72. Taipei
  73. Taschkent
  74. Teheran
  75. Tel Aviv
  76. Thimphu
  77. Tiflis
  78. Tokio
  79. Tschoibalsan
  80. Ulan Bator
  81. Ürümqi
  82. Vientiane
  83. Wladiwostok
Atlantik
  1. Azoren
  2. Bermuda
  3. Färöer
  4. Faroe
  5. Jan Mayen
  6. Kanarische Inseln
  7. Kap Verde
  8. Madeira
  9. Reykjavik
  10. St Helena
  11. Stanley
  12. Südgeorgien
Australien
  1. ACT
  2. Adelaide
  3. Brisbane
  4. Broken Hill
  5. Canberra
  6. Currie
  7. Darwin
  8. Eucla
  9. Hobart
  10. Lindeman-Insel
  11. Lord-Howe-Insel
  12. Lord Howe
  13. Melbourne
  14. New South Wales
  15. Norden
  16. Perth
  17. Queensland
  18. Sydney
  19. Süden
  20. Tasmanien
  21. Victoria
  22. Westen
  23. Yancowinna
Europa
  1. Amsterdam
  2. Andorra
  3. Athen
  4. Belfast
  5. Belgrade
  6. Berlin
  7. Bratislava
  8. Brüssel
  9. Budapest
  10. Bukarest
  11. Chisinau
  12. Dublin
  13. Gibraltar
  14. Guernsey
  15. Helsinki
  16. Isle of Man
  17. Istanbul
  18. Jersey
  19. Kaliningrad
  20. Kiew
  21. Kopenhagen
  22. Lissabon
  23. Ljubljana
  24. London
  25. Luxemburg
  26. Madrid
  27. Malta
  28. Mariehamn
  29. Minsk
  30. Monaco
  31. Moskau
  32. Nikosia
  33. Oslo
  34. Paris
  35. Podgorica
  36. Prag
  37. Riga
  38. Rom
  39. Samara
  40. San Marino
  41. Saporischschja
  42. Sarajevo
  43. Simferopol
  44. Skopje
  45. Sofia
  46. Stockholm
  47. Tallinn
  48. Tirana
  49. Tiraspol
  50. Uschhorod
  51. Vaduz
  52. Vatikan
  53. Vilnius
  54. Warschau
  55. Wien
  56. Wolgograd
  57. Zagreb
  58. Zürich
Indian
  1. Antananarivo
  2. Chagos
  3. Christmas
  4. Comoro
  5. Kerguelen
  6. Kokos
  7. Mahe
  8. Malediven
  9. Mauritius
  10. Mayotte
  11. Reunion
Pazifik
  1. Apia
  2. Auckland
  3. Chatham
  4. Chuuk
  5. Easter
  6. Efate
  7. Enderbury
  8. Fakaofo
  9. Fidschi
  10. Funafuti
  11. Galapagos-Inseln
  12. Gambier
  13. Guadalcanal
  14. Guam
  15. Honolulu
  16. Johnston
  17. Kiritimati
  18. Kosrae
  19. Kwajalein
  20. Majuro
  21. Marquesas
  22. Midway
  23. Nauru
  24. Niue
  25. Norfolk
  26. Noumea
  27. Pago Pago
  28. Palau
  29. Pitcairn
  30. Ponape
  31. Port Moresby
  32. Rarotonga
  33. Saipan
  34. Samoa
  35. Tahiti
  36. Tarawa
  37. Tongatapu
  38. Uvea
  39. Wake
  40. Yap

  <style>

    
div#foobar div.divider {
      
background-colorMediumaquamarine;
      
border-radius7px;
      
colorwhite;
      
font-size1.1em;
      
letter-spacing2px;
      
padding2px 0 2px 55px;
    }

    
div#foobar ol {
      
line-height30px;
      list-
style-positioninside;
      
margin-block-start0.3em;
      
margin-block-end0.3em;
    }

    
div#foobar ol li {
      
background-color#EAF8F3;
      
padding-left15px;
      
transitionbackground-color 0.3s;

      &:
hover {
        
background-color#CBEEE2;
      
}
    }

    
div#foobar ol li::marker {
      
colorForestgreen;
    }
  </
style>

    <script>
        
// Filter für HTML-Listenelemente
        
window.addEventListener("DOMContentLoaded", () => {
            
document.querySelectorAll(".filter").forEach(function (input) {
                var 
foobar document.querySelector(input.dataset.for);
                var list = 
foobar.querySelectorAll("ol li");
                
input.addEventListener("input", () => {
                    list.forEach(function (
li) {
                        if (
input.value.length 0) {
                            if (
input.value[0] == input.value[0].toUpperCase()) {
                                
li.hidden = !li.textContent.includes(input.value);
                            } else {
                                
li.hidden = !li.textContent.toLowerCase().includes(input.value.toLowerCase());
                            }
                        } else {
                            
li.hidden = !li.textContent.includes(input.value);
                        }
                    });
                });
            });
        });
    </
script>

    <
p>
        <
label>Nach StädtenInseln und Gebieten filtern:
          
<input type="search" class="filter" data-for="#foobar">
        </
label>
    </
p>

    <
div id="foobar">

        <
div class="divider">Afrika</div>

        <
ol start="1">
            <
li>Abidjan</li>
            <
li>Accra</li>
            <
li>Addis Ababa</li>
            <
li>Algier</li>
            <
li>Asmara</li>
            <
li>Asmera</li>
            <
li>Bamako</li>
            <
li>Bangui</li>
            <
li>Banjul</li>
            <
li>Bissau</li>
            <
li>Blantyre</li>
            <
li>Brazzaville</li>
            <
li>Bujumbura</li>
            <
li>Casablanca</li>
            <
li>Ceuta</li>
        </
ol>

       ... usw.

    </
div>

Siehe auch: HTML-Tabelle filtern

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<textarea> Mehrzeiliger Eingabebereich

CSS - Listenelemente einfärben

PHP - Prüfen, ob eine Variable ein Integer ist

JavaScript - Zahlenwert in einer Tabelle verändern

MySQL - Datensatz löschen