jQuery突出顯示搜索詞

Question

我正在嘗試拼湊一個搜索框，當在框中鍵入單詞時，該搜索框將突出顯示元素中的單詞。 到目前為止，它只適用於單個單詞，但是當某物包含空格時，它只會找到它的第一部分。

該代碼使用插件進行突出顯示，但我認為傳遞給插件以突出顯示該data的問題更多。

我相信data[d]正在拆分單詞，並且僅找到數組中的第一個單詞。

我在這里的目標是能夠搜索super cool （在小提琴中）並使其突出顯示兩個單詞，因為這是一個匹配項。

$("#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;
})

小提琴： https : //jsfiddle.net/g60ps0xw/

Answer 1

您可以將this.value.toLowerCase()存儲在data ，然后刪除循環並具有：

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

這是jsfiddle 。 這是您要找的東西嗎？

Answer 2

這是一個小提琴，將同時突出“超級”和“酷”。

https://jsfiddle.net/g25othfy/

請注意您的代碼中：

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

將為“數據”數組中的每個元素調用。 因此，正在發生的事情是先突出顯示data [0]，然后將其突出顯示，然后再突出顯示data [1]，依此類推。

Answer 3

$("#ruleSearch").keyup(function() {
    var data = this.value.toLowerCase();
    $('.ruleDetailsPlaceholder').unhighlight();
    if (data !== "") $('.ruleDetailsPlaceholder').highlight(data);
})

會發現“超級酷”而不是“超級東西”