javascript - jQuery 在搜索中突出显示单词

Question

我正在尝试组合一个搜索框，当在框中输入单词时，该搜索框将突出显示元素中的单词。到目前为止，它适用于单个单词，但当某些内容包含空格时，它只能找到它的第一部分。

该代码使用插件来突出显示，但我认为问题在传递给插件以突出显示它的数据中更是如此。

我相信 data[d] 正在分割单词，并且它只找到数组中的第一个单词。

我的目标是能够搜索 super 酷(在 fiddle 中)并让它突出显示两个匹配的单词。

$("#ruleSearch").keyup(function() {

  // Split the current value of searchInput
  var data = this.value.toLowerCase().split(" ");

  if (this.value == "") {
    $('.ruleDetailsPlaceholder').unhighlight();
    return;
  }

  for (var d = 0; d < data.length; ++d) {

      // Highlight our query within the rule
    $('.ruleDetailsPlaceholder').unhighlight();
    $('.ruleDetailsPlaceholder').highlight(data[d]);

    return true;

  }
  return false;
})

fiddle :https://jsfiddle.net/g60ps0xw/

Answer 1

您可以将 this.value.toLowerCase() 存储在 data 中，然后删除循环并获得:

$('.ruleDetailsPlaceholder').unhighlight();
$('.ruleDetailsPlaceholder').highlight(data);

这是jsfiddle 。这是您要找的吗？