Academics with highlighting

by kevee

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="well"><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"></div>
            </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, Trade-->Business Admin B.S. <span...

CSS

.highlighted {
    background: yellow;
    padding: 10px;
    margin: 10px 0;
}

JavaScript

//Academics with highlighting
$('#search').on('keyup', function () {
    var searched = $(this).val().toLowerCase().trim();
    $('.highlighted').each(function () {
        $(this).removeClass('highlighted');
    });
    if ($(this).val().trim().length && $(this).val().trim().length > 3) {
        $('#stuff a').each(function () {
            if ($(this).get(0).innerHTML.toLowerCase().search(searched) > -1) {
                $(this).parent('li').addClass('highlighted');
            }
        });
    }
});

$('form').on('submit', function(event) {
    event.preventDefault();
});