JSFiddle - React, Tailwind, and code Playground

by kevee

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <p class="lead"><strong>Some of our majors have wacky names</strong>, if you don't see what you are looking for, try typing the name of your desired program below.</p>
            <form>
                <div class="form-group">
                    <label for="search" class="sr-only">Search</label>
                    <input type="text" class="form-control input-lg" id="search" placeholder="English" />
                </div>
            </form>
            <div id="results"><ul class="list-unstyled"></ul></div>
        </div>
    </div>
    <div class="row" id="stuff">
        <div class="col-md-6">
             <h2>Majors</h2>

            <ul class="list-unstyled">
                <li class="first"><a href="http://catalog.csumb.edu/undergrad-education/majors/biology"><!--Biology, biotechnology, Aquarium, Exercise science, Environmental Science, Ecology, Geographic information systems, Ichthyology, Native plant restoration, Natural resources, Natural science, Public Health, Oceanography, Research, Science, illustration, Veterinary medicine, Watershed management-->Biology B.S. <span class="hidden_tip">(Majors)</span></a>
                </li>
                <li><a href="http://catalog.csumb.edu/undergrad-education/majors/business-admin"><!--Business, Advertising, Communications, economics, event planning, Tourism, Agribusiness, Banking, Budget analysis, Corporate leadership, Ethics, Entrepreneurship, e-Commerce, Finance, hospitality, High-tech business, human resources, Information technology, International business, Management, Marketing, Nonprofit administration, Operations management, Retail management, Sales, Small business, Strategic planning, Technical writing, Technology management,...

CSS

#results li a {
    font-size: 1.8em;
}

JavaScript

//Academics with search results
$('#search').on('keyup', function () {
    var searched = $(this).val().toLowerCase().trim();
    $('#results li').remove();
    if ($(this).val().trim().length && $(this).val().trim().length > 3) {
        $('#stuff a').each(function () {
            if ($(this).get(0).innerHTML.toLowerCase().search(searched) > -1) {
                $('#results ul').append('<li>' + $(this).parent('li').clone().html() + '</li>');
            }
        });
    }
});