jQuery在搜索上突出顯示單詞

我正試圖將搜索框放在一起，以便在單元內鍵入框時突出顯示單詞內的單詞。到目前爲止，它是爲單個單詞而工作，但是當某個東西包含空間時，它只能找到它的第一部分。jQuery在搜索上突出顯示單詞

該代碼使用插件來突出顯示，但我認爲問題更多的是在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/

來源

2017-05-31 SBB

你可以只保存在this.value.toLowerCase()data，然後取出循環，並具有：

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

這裏的jsfiddle。這是你在找什麼？

來源

2017-05-31 19:39:47 Anthony

很簡單：/ - 很快接受。謝謝！ – SBB

很高興幫助:) – Anthony

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

會發現「超爽」，而不是「超材料」

來源

2017-05-31 19:47:59 jeanmichel71

這裏有一個小提琴，將突出兩個「超級」和「酷」。在你的代碼

https://jsfiddle.net/g25othfy/

注意的：

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

將被要求對 '數據' 數組中的每個元素。因此，發生的情況是數據[0]被突出顯示，然後未被突出顯示，然後數據[1]被突出顯示等。

來源

2017-05-31 19:54:42 Vardkin

jQuery在搜索上突出顯示單詞

回答

相關問題