javascript - jQuery 快速搜索通过 onAfter 函数调用突出显示结果？

Question

我昨天很快就得到了关于 best autocomplete option for what I needed. 的惊人答案。

我想我可以使用 onAfter function call from QuickSearch调用SearchHighlight plugin to highlight the text I am typing in.

这可行吗？我很难让它工作。

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>rikrikrik - quickSearch jQuery plug-in - List items</title>
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="jquery.quicksearch.js" type="text/javascript" charset="utf-8"></script>
        <script src='jquery.SearchHighlight.js'></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {             
                $('ul#a li').quicksearch({
                    attached: 'ul:first',
                    position: 'before',
                    labelText: 'Search all countries beginning with A',
                    inputText: 'Search',
                    loaderImg: 'loader.gif',
                    loaderText: 'Searching...'
                    onAfter: ('ul#a li').SearchHighlight(partial)

Answer 1

看起来该插件旨在处理从引荐来源网址解析关键字的正则表达式。我没有看到您更改 SearchHighlight 插件的选项，因此您正在使用其默认配置。这意味着它不知道您的搜索文本框，也不知道如何从中提取关键字。不过，您似乎可以使用 keys 选项将其重新配置为使用特定关键字。

因此，您需要将对 SearchHighlight 的调用更改为如下所示:

        $(document).ready(function() {
        $('ul#a li').quicksearch({
        attached: 'ul:first',
        position: 'before',                                
        labelText: 'Search all countries beginning with A',                                
        inputText: 'Search',                                
        loaderImg: 'loader.gif',                                
        loaderText: 'Searching...',
        onAfter: function() { $('ul#a li').SearchHighlight({ exact: "partial", keys: $('.qs_input').val() });
    }); 

其中 SEARCH_BOX 是您的文本框的 ID。

编辑:哈!我的语法偏离了。对于那个很抱歉。上面的代码应该适合你。此外，这可能不是那么好，因为当您更改搜索字符串时无法重置突出显示。