Highlighting content in cell on input filter

Question

I use ASP.NET MVC5 & JQuery. Currently I have a table setup that is filled with values from a database. Two columns: Name & Explanation

I can filter through both columns by typing and all rows that have a value that contains the input will be shown. Because the explanations are quite lengthy I would like to highlight the exact matches in the values in the cells. Think of making them bold, curved or anything like that.

Is there any way I could do this using JQuery?

---

EDIT1:

Filtering itself works already. I would just like to see the following to happen:

input: Book in t

Cell value: Today I am reading a Book in the garden.

The purpose of this would be to clarify where the value matches with your input.

Let me know if you have any more questions!

---

Input on which I filter:

<tr class="tableRow">
   <td><input type="search" class="form-control tableFilter"  placeholder="Filter..." /></
</tr>

Current JQuery that handles filtering:

//Table Filter based on input
$(".tableFilter").keyup(function () {
    //split the current value of searchInput
    var data = this.value.split(" ");
    //create a jquery object of the rows
    var jo = $(".table").find("tbody tr");
    if (this.value == "") {
        jo.show();
        return;
    }
    //hide all the rows
    jo.hide();

    //Filter the jquery object to get results.
    jo.filter(function (i, v) {
        var $t = $(this);
        var matched = true;
        for (var d = 0; d < data.length; ++d) {
            if (data[d].match(/^\s*$/)) {
                continue;
            }
            var regex = new RegExp(data[d].toLowerCase());
            if ($t.text().toLowerCase().replace(/(manual|auto)/g, "").match(regex) === null) {
                matched = false;
            }
        }
        return matched;
    }).show();
})

Answer 1

You mean something like this. Instead of using regex I used here indexOf function to get to know if provided string exist in cell.

//Table Filter based on input
$(".tableFilter").keyup(function() {

  var rows = $(".table").find("tbody tr");

  //Filter the jquery object to get results.
  if (this.value.length > 0) {
   //First hide all an remove class used to identify matched rows
    rows.removeClass("match").hide().filter(function() {
     var match = false;
     $(this).find("td.filter").each(function() {
        var indexOf = $(this).text().toLowerCase().indexOf($(".tableFilter").val().toLowerCase());
        //Check with indexOf if this row cell include search string
        if(indexOf !== -1) {
          match = true;
           return;
        } 
      });
     return match;
    }).addClass("match").show();
  } else {
   //If filter not provided show all 
    rows.removeClass("match").show().find("b").contents().unwrap();
  }

  highlight(this.value);
})

var highlight = function(string) {
  $(".table").find("tbody tr.match td.filter").each(function() {
  
   if($(this).text().indexOf(string) === -1)
     return;
  
    var matchStartIndex = $(this).text().toLowerCase().indexOf(string.toLowerCase());
    var matchEndIndex = matchStartIndex + string.length - 1;

    var beforeMatch = $(this).text().slice(0, matchStartIndex);
    var matchText = $(this).text().slice(matchStartIndex, matchEndIndex + 1);
    var afterMatch = $(this).text().slice(matchEndIndex + 1);

    //Here set selected text to e.g. bold style
    $(this).html(beforeMatch + "<b>" + matchText + "</b>" + afterMatch);
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" class="form-control tableFilter" placeholder="Filter..." />
<table class="table" border="1">
  <thead>
    <tr class="tableRow">
      <th>Col1</th>
      <th>Col2</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="filter">test of tests</td>
      <td class="filter">second of tests</td>
      <td>Edit/Delete</td>
    </tr>
    <tr>
      <td class="filter">book in the garden</td>
      <td class="filter">two books in the garden</td>
      <td>Edit/Delete</td>
    </tr>
    <tr>
      <td class="filter">chain hell</td>
      <td class="filter">chain hell continues</td>
      <td>Edit/Delete</td>
    </tr>
  </tbody>
</table>