JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<input type="text" id="search" />
<ul id="list">
    <li>George Washington</li>
    <li>John Adams</li>
    <li>Thomas Jefferson</li>
    <li>James Madison</li>
    <li>James Monroe</li>
    <li>John Quincy Adams</li>
    <li>Andrew Jackson</li>
    <li>Martin Van Buren</li>
    <li>William Henry Harrison</li>
    <li>John Tyler</li>
    <li>James K. Polk</li>
    <li>Zachary Taylor</li>
    <li>Millard Fillmore</li>
    <li>Franklin Pierce</li>
    <li>James Buchanan</li>
    <li>Abraham Lincoln</li>
    <li>Andrew Johnson</li>
    <li>Ulysses S. Grant</li>
    <li>Rutherford B. Hayes</li>
    <li>James A. Garfield</li>
    <li>Chester A. Arthur</li>
    <li>Grover Cleveland</li>
    <li>Benjamin Harrison</li>
    <li>Grover Cleveland</li>
    <li>William McKinley</li>
    <li>Theodore Roosevelt</li>
    <li>William Howard Taft</li>
    <li>Woodrow Wilson</li>
    <li>Warren G. Harding</li>
    <li>Calvin Coolidge</li>
    <li>Herbert Hoover</li>
    <li>Franklin D. Roosevelt</li>
    <li>Harry S. Truman</li>
    <li>Dwight D. Eisenhower</li>
    <li>John F. Kennedy</li>
    <li>Lyndon B. Johnson</li>
    <li>Richard Nixon</li>
    <li>Gerald Ford</li>
    <li>Jimmy Carter</li>
    <li>Ronald Reagan</li>
    <li>George H. W. Bush</li>
    <li>Bill Clinton</li>
    <li>George W. Bush</li>
    <li>Barack Obama</li>
</ul>

JavaScript

var inputElement = document.querySelector('input');
var listItems = Array.from(document.querySelectorAll('li'));

inputElement.addEventListener('keyup', function(event) {
  var typedText = inputElement.value;
  
	for (var i = 0; i < listItems.length; i++) {
    var item = listItem[i];
    if (shouldShow(typedText, item.innerText)) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  }
});

function shouldShow(typedText, itemText) {
  if (typedText === '') return true; // always show if the typed text is empty!
  if (itemText.toUpperCase().indexOf(typedText.toUpperCase()) === -1) {
    return false;
  } else {
    return true;
  }
}

// TESTS!!!

assert(shouldShow('geo', 'George Washington') === true);
assert(shouldShow('', 'George Washington') === true);
assert(shouldShow('asdf', 'Andrew Jackson') === false);
alert('All tests passed!!');

// Oops, we need to write a function called assert()

function assert(shouldBeTrue) {
  if (shouldBeTrue !== true) {
    alert('Test Failure');
    throw new Error('Your assert failed!!!');
  }
}