jQuery addClass example

Change class name on click in jQuery

by Avinashullal

HTML

<input type="text" id="searchText" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
                                <li>
                                    <div class="d-flex flex-column">
                                        <div class="d-flex flex-row justify-content-between"><span>Bloomberg Law</span> <a href="#" class="tag">ANTITRUST</a></div>
                                        <a class="title" target="_blank" href="https://news.bloomberglaw.com/us-law-week/big-law-stands-to-bill-big-in-tech-antitrust-probe"><h5>Big Law Stands to Bill Big in Tech Antitrust Probe</h5></a>
                                        <p>A looming government antitrust probe is Silicon Valley’s biggest nightmare—and a massive win for big law firms. (BSF is mentioned.)</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex flex-column">
                                        <div class="d-flex flex-row justify-content-between"><span>New York Post</span> <a href="#" class="tag">BRANDON STEINER</a></div>
                                        <a class="title" target="_blank" href="https://nypost.com/2019/06/12/founder-and-ceo-completely-blindsided-by-sale-of-steiner-sports-to-rival/"><h5>Founder and CEO completely blindsided by sale of Steiner Sports to rival</h5></a>
                                        <p>Last month’s sale of Steiner Sports Memorabilia came as a complete surprise — including to its controversial founder and CEO, Brandon Steiner. (Jonathan Schiller and Andrew Marrero represent Brandon Steiner.)</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex flex-column">
                                        <div class="d-flex flex-row...

CSS

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

JavaScript

$('#searchText').bind('keyup', function() {
   
    var searchString = $(this).val();

    $("ul#myUL li").each(function(index, value) {
        
        currentName = $(value).text()
        if( currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) {
           $(value).show();
        } else {
            $(value).hide();
        }
        
    });
    
});