API tools faq
paste
metalx1000

HTML JavaScript Fuzzy Filter List

metalx1000
Apr 9th, 2021
885
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <style>
  8.       html *{
  9.         font-size: 35px !important;
  10.         margin: 2px;
  11.       }
  12.  
  13.       @media only screen and (min-width: 600px) {
  14.         body {
  15.           margin-right:200px;
  16.           margin-left:200px;
  17.           margin-top: 0;
  18.         }
  19.       }
  20.       .flex{
  21.         display: grid;
  22.         grid-row-gap: 1rem;
  23.         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  24.       }
  25.  
  26.     </style>
  27.     <script src="js/fuzzy-min.js"></script>
  28.     <script>
  29.       var list = [
  30.       'Liam',
  31.       'Noah',
  32.       'Oliver',
  33.       'William',
  34.       'Elijah',
  35.       'James',
  36.       'Benjamin',
  37.       'Lucas',
  38.       'Mason',
  39.       'Ethan',
  40.       'Alexander',
  41.       'Henry',
  42.       'Jacob',
  43.       'Michael',
  44.       'Daniel',
  45.       'Logan',
  46.       'Jackson',
  47.       'Sebastian',
  48.       'Jack',
  49.       'Aiden',
  50.       'Owen',
  51.       'Samuel',
  52.       'Matthew',
  53.       'Joseph',
  54.       'Levi',
  55.       'Mateo',
  56.       'David',
  57.       'John',
  58.       'Wyatt',
  59.       'Carter',
  60.       'Julian',
  61.       'Luke',
  62.       'Grayson',
  63.       'Isaac',
  64.       'Jayden',
  65.       'Theodore',
  66.       'Gabriel',
  67.       'Anthony',
  68.       'Dylan',
  69.       'Leo',
  70.       'Lincoln',
  71.       'Jaxon',
  72.       'Asher',
  73.       'Christopher',
  74.       'Josiah',
  75.       'Andrew',
  76.       'Thomas',
  77.       'Joshua',
  78.       'Ezra',
  79.       'Hudson',
  80.       'Charles',
  81.       'Caleb',
  82.       'Isaiah',
  83.       'Ryan',
  84.       'Nathan',
  85.       'Adrian',
  86.       'Christian',
  87.       'Maverick',
  88.       'Colton',
  89.       'Elias',
  90.       'Aaron',
  91.       'Eli',
  92.       'Landon',
  93.       'Jonathan',
  94.       'Nolan',
  95.       'Hunter',
  96.       'Cameron',
  97.       'Connor',
  98.       'Santiago',
  99.       'Jeremiah',
  100.       'Ezekiel',
  101.       'Angel',
  102.       'Roman',
  103.       'Easton',
  104.       'Miles',
  105.       'Robert',
  106.       'Jameson',
  107.       'Nicholas',
  108.       'Greyson',
  109.       'Cooper',
  110.       'Ian',
  111.       'Carson',
  112.       'Axel',
  113.       'Jaxson',
  114.       'Dominic',
  115.       'Leonardo',
  116.       'Luca',
  117.       'Austin',
  118.       'Jordan',
  119.       'Adam',
  120.       'Xavier',
  121.       'Jose',
  122.       'Jace',
  123.       'Everett',
  124.       'Declan',
  125.       'Evan',
  126.       'Kayden',
  127.       'Parker',
  128.       'Wesley',
  129.       'Kai',
  130.       'Brayden',
  131.       'Bryson',
  132.       'Weston',
  133.       'Jason',
  134.       'Emmett',
  135.       'Sawyer',
  136.       'Silas',
  137.       'Bennett',
  138.       'Brooks',
  139.       'Micah',
  140.       'Damian',
  141.       'Harrison',
  142.       'Waylon',
  143.       'Ayden',
  144.       'Vincent',
  145.       'Ryder',
  146.       'Kingston',
  147.       'Rowan',
  148.       'George',
  149.       'Luis',
  150.       'Chase',
  151.       'Cole',
  152.       'Nathaniel',
  153.       'Zachary',
  154.       'Ashton',
  155.       'Braxton',
  156.       'Gavin',
  157.       'Tyler',
  158.       'Diego',
  159.       'Bentley',
  160.       'Amir',
  161.       'Beau',
  162.       'Gael',
  163.       'Carlos',
  164.       'Ryker',
  165.       'Jasper',
  166.       'Max',
  167.       'Juan',
  168.       'Ivan',
  169.       'Brandon',
  170.       'Jonah',
  171.       'Giovanni',
  172.       'Kaiden',
  173.       'Myles',
  174.       'Calvin',
  175.       'Lorenzo',
  176.       'Maxwell',
  177.       'Jayce',
  178.       'Kevin',
  179.       'Legend',
  180.       'Tristan',
  181.       'Jesus',
  182.       'Jude',
  183.       'Zion',
  184.       'Justin',
  185.       'Maddox',
  186.       'Abel',
  187.       'King',
  188.       'Camden',
  189.       'Elliott',
  190.       'Malachi',
  191.       'Milo',
  192.       'Emmanuel',
  193.       'Karter',
  194.       'Rhett',
  195.       'Alex',
  196.       'August',
  197.       'River',
  198.       'Xander',
  199.       'Antonio',
  200.       'Brody',
  201.       'Finn',
  202.       'Elliot',
  203.       'Dean',
  204.       'Emiliano',
  205.       'Eric',
  206.       'Miguel',
  207.       'Arthur',
  208.       'Matteo',
  209.       'Graham',
  210.       'Alan',
  211.       'Nicolas',
  212.       'Blake',
  213.       'Thiago',
  214.       'Adriel',
  215.       'Victor',
  216.       'Joel',
  217.       'Timothy',
  218.       'Hayden',
  219.       'Judah',
  220.       'Abraham',
  221.       'Edward',
  222.       'Messiah',
  223.       'Zayden',
  224.       'Theo',
  225.       'Tucker',
  226.       'Grant',
  227.       'Richard',
  228.       'Alejandro',
  229.       'Steven',
  230.       'Jesse',
  231.       'Dawson',
  232.       'Bryce',
  233.       'Avery',
  234.       'Oscar',
  235.       'Patrick',
  236.       'Archer',
  237.       'Barrett',
  238.       'Leon',
  239.       'Colt',
  240.       'Charlie',
  241.       'Peter',
  242.       'Kaleb',
  243.       'Lukas',
  244.       'Beckett',
  245.       'Jeremy',
  246.       'Preston',
  247.       'Enzo',
  248.       'Luka',
  249.       'Andres',
  250.       'Marcus',
  251.       'Felix',
  252.       'Mark',
  253.       'Ace',
  254.       'Brantley',
  255.       'Atlas',
  256.       'Remington',
  257.       'Maximus',
  258.       'Matias',
  259.       'Walker'
  260.       ];
  261.  
  262.       function search(){
  263.         var q = document.getElementById("searchBox").value;
  264.         console.log(q)
  265.  
  266.         var output = document.getElementById("output");
  267.         output.innerHTML = '';
  268.         var results = fuzzy.filter(q, list);
  269.         console.log(results);
  270.  
  271.         for( r of results ){
  272.           output.innerHTML+=`<button class="button">${r.string}</button>`;
  273.         }
  274.       }
  275.  
  276.       document.addEventListener("DOMContentLoaded", function(){
  277.  
  278.       });
  279.     </script>
  280.   </head>
  281.   <body>
  282.     <div class="flex">
  283.       <input type="text" id="searchBox" onkeyup="search()"/>
  284.     </div>
  285.     <div id="output" class="flex">
  286.     </div>
  287.   </body>
  288. </html>
  289.  
  290.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!