mark.js list filter and highlight

Filter a list for dynamic search terms and highlight matches

by zzzrefiddle

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/g/[email protected],[email protected],[email protected](jquery.mark.min.js)"></script>
<input type="text" name="keyword" class="form-control input-sm" placeholder="Search term...">
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>President</th>
      <th>Birthplace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zachary Taylor</td>
      <td>Barboursville, Virginia</td>
    </tr>
    <tr>
      <td>Warren G. Harding</td>
      <td>Blooming Grove, Ohio</td>
    </tr>
    <tr>
      <td>John Quincy Adams</td>
      <td>Braintree, Massachusetts</td>
    </tr>
    <tr>
      <td>John F. Kennedy</td>
      <td>Brookline, Massachusetts</td>
    </tr>
    <tr>
      <td>Grover Cleveland</td>
      <td>Caldwell, New Jersey</td>
    </tr>
    <tr>
      <td>William Henry Harrison</td>
      <td>Charles City County, Virginia</td>
    </tr>
    <tr>
      <td>John Tyler</td>
      <td>Charles City County, Virginia</td>
    </tr>
    <tr>
      <td>William Howard Taft</td>
      <td>Cincinnati, Ohio</td>
    </tr>
    <tr>
      <td>James Buchanan</td>
      <td>Cove Gap, Pennsylvania</td>
    </tr>
    <tr>
      <td>Rutherford B. Hayes</td>
      <td>Delaware, Ohio</td>
    </tr>
    <tr>
      <td>Dwight D. Eisenhower</td>
      <td>Denison, Texas</td>
    </tr>
    <tr>
      <td>Chester A. Arthur</td>
      <td>Fairfield, Vermont</td>
    </tr>
    <tr>
      <td>Franklin Pierce</td>
      <td>Hillsborough, New Hampshire</td>
    </tr>
    <tr>
      <td>Barack Obama</td>
      <td>Honolulu, Hawaii</td>
    </tr>
    <tr>
      <td>Bill Clinton</td>
      <td>Hope, Arkansas</td>
    </tr>
    <tr>
      <td>Franklin D. Roosevelt</td>
      <td>Hyde Park, New York</td>
    </tr>
    <tr>
      <td>Martin Van Buren</td>
      <td>Kinderhook, New York</td>
    </tr>
    <tr>
      <td>Harry S. Truman</td>
     ...

CSS

mark {
  background: orange;
  color: inherit;
  padding: 0;
}

JavaScript

$(function() {
  var $input = $("input[name='keyword']"),
    $context = $("table tbody tr");
  $input.on("input", function() {
    var term = $(this).val();
    $context.show().unmark();
    if (term) {
      $context.mark(term, {
        done: function() {
          $context.not(":has(mark)").hide();
        }
      });
    }
  });
});