metalx1000

HTML Auto Filter Input List

Apr 9th, 2021
1,792
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