在输入过滤器上突出显示单元格中的内容

Question

我使用 ASP.NET MVC5 和 JQuery。目前我有一个表设置，其中填充了数据库中的值。两列：名称和说明

我可以通过键入来过滤这两个列，并且将显示具有包含输入的值的所有行。因为解释很长，我想强调单元格中值的完全匹配。考虑让它们变得粗体、弯曲或类似的东西。

有什么方法可以使用 JQuery 做到这一点吗？

---

编辑1：

过滤本身已经起作用。我只想看到以下情况发生：

输入：预定时间

单元格值：今天我正在在花园里看书。

这样做的目的是澄清值与您的输入匹配的位置。

如果您还有任何问题，请告诉我！

---

我过滤的输入：

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

当前处理过滤的 JQuery：

//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

你的意思是这样的。我没有使用正则表达式，而是在这里使用indexOf 函数来了解单元格中是否存在提供的字符串。

//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>