metalx1000

HTML Auto Filter Input List

Apr 9th, 2021
1,643
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <body>
  4.  
  5.     <h1>People</h1>
  6.  
  7.     <label for="name">Choose your name from the list:</label>
  8.     <input list="names" name="name" id="name" onchange="checkExists(this.value)" autocomplete="off" autofocus>
  9.     <datalist id="names">
  10.     <option value="Liam">
  11.     <option value="Noah">
  12.     <option value="Oliver">
  13.     <option value="William">
  14.     <option value="Elijah">
  15.     <option value="James">
  16.     <option value="Benjamin">
  17.     <option value="Lucas">
  18.     <option value="Mason">
  19.     <option value="Ethan">
  20.     <option value="Alexander">
  21.     <option value="Henry">
  22.     <option value="Jacob">
  23.     <option value="Michael">
  24.     <option value="Daniel">
  25.     <option value="Logan">
  26.     <option value="Jackson">
  27.     <option value="Sebastian">
  28.     <option value="Jack">
  29.     <option value="Aiden">
  30.     <option value="Owen">
  31.     <option value="Samuel">
  32.     <option value="Matthew">
  33.     <option value="Joseph">
  34.     <option value="Levi">
  35.     <option value="Mateo">
  36.     <option value="David">
  37.     <option value="John">
  38.     <option value="Wyatt">
  39.     <option value="Carter">
  40.     <option value="Julian">
  41.     <option value="Griffin">
  42.     <option value="Kenneth">
  43.     <option value="Israel">
  44.     <option value="Javier">
  45.     <option value="Kyler">
  46.     <option value="Jax">
  47.     <option value="Amari">
  48.     <option value="Zane">
  49.     <option value="Emilio">
  50.     <option value="Knox">
  51.     <option value="Adonis">
  52.     <option value="Aidan">
  53.     <option value="Kaden">
  54.     <option value="Paul">
  55.     <option value="Omar">
  56.     <option value="Brian">
  57.     <option value="Louis">
  58.     <option value="Caden">
  59.     <option value="Maximiliano">
  60.     <option value="Holden">
  61.     <option value="Paxton">
  62.     <option value="Nash">
  63.     <option value="Gunner">
  64.     <option value="Jake">
  65.     <option value="Hayes">
  66.     <option value="Manuel">
  67.     <option value="Prince">
  68.     <option value="Bodhi">
  69.     <option value="Cohen">
  70.     </datalist>
  71.   </body>
  72.   <script>
  73.     function checkExists(inputValue) {
  74.       var x = document.getElementById("names");
  75.       var i;
  76.       var flag;
  77.       for (i = 0; i < x.options.length; i++) {
  78.        if(inputValue == x.options[i].value){
  79.          flag = true;
  80.          alert(inputValue);
  81.        }
  82.      }
  83.      return flag;
  84.    }
  85.  </script>
  86. </html>
  87.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×