突出显示 jQuery.autocomplete 的多个关键字

Posted 2023-03-06

【中文标题】突出显示 jQuery.autocomplete 的多个关键字

【英文标题】：Highlight multiple keywords for jQuery.autocomplete

【发布时间】：2010-10-31 17:29:24

【问题描述】：

我正在使用 jQuery Autocomplete plugin，但我在结果突出显示方面遇到了一些问题。如果找到匹配项，但输入的关键字包含空格，则不会突出显示。示例：

搜索 = "foo"，结果 = "foo bar"，显示 = "foo bar"

搜索 = “foo ba”，结果 = “foo bar”，显示 = “foo bar”

所以，我正在尝试使用自动完成功能的highlight option 来解决此问题，您可以在其中使用函数对结果执行一些自定义操作。目前我有这个：

$('.autocomplete').autocomplete('getmatch.php', 
    highlight: function(match, keywords) 
        keywords = keywords.split(' ').join('|');
        return match.replace(/(get|keywords|here)/gi,'<b>$1</b>');
    
);

replace 函数将字符串中所有匹配的单词替换为粗体版本，这是有效的。但是，我不知道如何将关键字放入该函数。我想我会把它们分开，然后用'|'加入它们，所以“foo bar”最终像“foo|bar”。但是这样的事情似乎不起作用：

<pre>return match.replace(/(keywords)/gi,'&lt;b&gt;$1&lt;/b&gt;'); // seen as text, I think</pre>

<pre>return match.replace('/'+(keywords)+'/gi','&lt;b&gt;$1&lt;/b&gt;'); // nothing either</pre>

有什么想法吗？

【参考方案1】：

使用RegExp constructor从字符串创建一个RegExp对象：

$('.autocomplete').autocomplete('getmatch.php', 
    highlight: function(match, keywords) 
        keywords = keywords.split(' ').join('|');
        return match.replace(new RegExp("("+keywords+")", "gi"),'<b>$1</b>');
    
);

【讨论】：

谢谢，这适用于所有关键字的替换！但是，它们被替换为“$1”——实际的文本 $1，而不是 $1 应该代表的关键字本身？

通过对关键字进行分组来修复它。

突出显示的目的是，如果您输入的值与某个项目匹配，但不是该项目，用户可以轻松替换它。想想在 Excel 中，当您键入“Ma”并且其上方的单元格显示“Male”时 - 它会自动填充“le”但将它们突出显示，这样您就可以继续输入“nifest”而不会停止。

它对英文关键字工作正常，但是对于印度语言特别是印地语怎么办？

【参考方案2】：

你的函数应该使用这个签名：function(value, term)。值和术语将由自动完成插件填充并具有您需要的值。

【参考方案3】：

我调整了最初的自动完成实现，因为上面的内容被简化了，不会处理术语中的正则表达式特殊字符。

function doTheHighlight(value, term) 
    // Escape any regexy type characters so they don't bugger up the other reg ex
    term = term.replace(/([\^\$\(\)\[\]\\\*\.\+\?\|\\])/gi, "\\$1");

    // Join the terms with a pipe as an 'OR'
    term = term.split(' ').join('|');

    return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");