mark.js table column highlighting example

This fiddle demonstrates how to use julmot/mark.js with column highlighting

by Julian

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/superhero/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
<h2><a href="https://markjs.io/" target="_blank">mark.js</a> table column highlighting example</h2>

<div class="panel panel-default">
  <div class="panel-heading">Search</div>
  <div class="panel-body">
    <div class="search row">
      <div class="col-xs-6">
        <span>Type in the item name:</span>
        <input type="text" name="item" class="form-control input-sm" placeholder="Chromecast...">
      </div>
      <div class="col-xs-6">
        <span>Type in a seller:</span>
        <input type="text" name="seller" class="form-control input-sm" placeholder="Rick Johnson...">
      </div>
    </div>
  </div>
</div>


<div class="panel panel-default">
  <div class="panel-body context">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Item</th>
          <th>Price</th>
          <th>Seller</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Chromecast</td>
          <td>39,00 €</td>
          <td>John Doe</td>
        </tr>
        <tr>
          <td>Amazon Fire TV</td>
          <td>99,99 €</td>
          <td>Mary Moe</td>
        </tr>
        <tr>
          <td>Samsung Allshare Dongle</td>
          <td>34,95 €</td>
          <td>Rick Johnson</td>
        </tr>
      </tbody>
    </table>

  </div>
</div>

<div class="panel panel-default">
  <div class="panel-body">
    <p>
      <small>Demo by <a href="https://github.com/julmot" target="_blank">Julian Motz</a></small>
    </p>
  </div>
</div>

CSS

body {
  margin: 15px;
}

div.search span {
  display: block;
}

div.search input[type="text"] {
  margin-top: 4px;
}

div.panel {
  margin-bottom: 15px;
}

div.panel .panel-body p:last-child {
  margin-bottom: 0;
}

span.markYellow {
  background: yellow;
  color: black;
}

span.markBlue {
  background: blue;
  color: white;
}

JavaScript

$(function() {

  $("input[name='item']").on("keyup", function() {
    var keyword = $(this).val(),
      options = {
        "element": "span",
        "className": "markBlue",
        "separateWordSearch": true
      },
      $ctx = $(".context table tr td:nth-child(1)");
    $ctx.unmark({
      done: function() {
        $ctx.mark(keyword, options);
      }
    });
  });
  
  $("input[name='seller']").on("keyup", function() {
    var keyword = $(this).val(),
      options = {
        "element": "span",
        "className": "markYellow",
        "separateWordSearch": true
      },
      $ctx = $(".context table tr td:nth-child(3)");
    $ctx.unmark({
      done: function() {
        $ctx.mark(keyword, options);
      }
    });
  });

});