jQuery自动完成突出显示答案

【问题标题】：jquery autocomplete highlightingjQuery自动完成突出显示
【发布时间】：2011-04-11 08:17:26
【问题描述】：

如何让我的 jquery 自动完成功能突出显示用户在任何自动完成结果中输入的内容？我使用的代码是：

    $("#keyword").autocomplete({ 
        source: "ajax/autocomplete.php?action=keyword", 
        minLength: 2 
    });

尝试从 tomasz 发布的链接中实现：

    $("#keyword").autocomplete({ 
        source: "ajax/autocomplete.php?action=keyword", 
        highlight: function(value, term) { 
    return value.replace(new RegExp("("+term+")", "gi"),'<b>$1</b>'); 
    },
        minLength: 2 
    });

那里也没有运气。 jQuery 自动完成功能似乎讨厌我。

更新：感谢大卫·默多克，我现在有了答案！请参阅下面@Herman 的答案副本。

【问题讨论】：

this site might help you上的代码。
感谢您发布解决方案。非常适合我。
如果您找到了解决方案，您应该将其作为答案发布并接受。这被认为完全没问题；见this FAQ on Meta Stack Overflow。
@Jaime：请继续，将您的答案移至...一个答案。

标签： javascript jquery autocomplete

【解决方案1】：

感谢http://www.vervestudios.co/ 的 David Murdoch 提供了这个有用的答案：

$.ui.autocomplete.prototype._renderItem = function( ul, item){
  var term = this.term.split(' ').join('|');
  var re = new RegExp("(" + term + ")", "gi") ;
  var t = item.label.replace(re,"<b>$1</b>");
  return $( "<li></li>" )
     .data( "item.autocomplete", item )
     .append( "<a>" + t + "</a>" )
     .appendTo( ul );
};
$("#keyword").autocomplete({ 
  source: "ajax/autocomplete.php?action=keyword", 
  minLength: 2 
});

【讨论】：

感谢@Herman Schaaf 我仍然习惯 SO 并且没有看到关于此的评论。 :(
这很好用，但是如果我只想突出显示用户输入的文本怎么办。例如，如果单词列表包含单词“abcabc”并且用户输入了“ab”，我希望只有第一个“ab”字符串会被突出显示。我应该改变吗？
我见过很多丑陋的方法来解决这个问题，这绝对是我迄今为止见过的最漂亮的。已实施！
如果用户输入括号，则提示此中断：未捕获的语法错误：无效的正则表达式：/（（）/：未终止的组

【解决方案2】：

认为有人可能会觉得这很有用。它是一个完整的 HTML 文档，利用了上述原则。我用它作为我的一些工作的原型。

    <html xmlns="http://www.w3.org/1999/xhtml">

    <!--

        orders.html simply returns the following text

        Basketball#Football#Baseball#Helicopter#gubbins#harry potter#banyan


    -->

    <head id="Head1" runat="server">
        <title>AutoComplete Box with jQuery</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
            rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
        <script type="text/javascript">

            function loadData() {

                var sURL = "orders.htm";

                $.ajaxSetup({ cache: false });

                $.ui.autocomplete.prototype._renderItem = function (ul, item) {
                    var term = this.term.split(' ').join('|');
                    var re = new RegExp("(" + term + ")", "gi");
                    var t = item.label.replace(re, "<b>$1</b>");
                    return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + t + "</a>")
                    .appendTo(ul);
                };

                $.get(sURL, function (responseText) {
                    data = responseText.split('#');

                    $("#txtSearch").autocomplete({
                        //source: availableSports
                        source: data,
                        minLength: 2 

                    });

                });

            }

        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="demo">
            <div class="ui-widget">
                <label for="tbAuto">
                    Enter data:
                </label>
                <input type="text" id="txtSearch" class="autosuggest" onkeyup="loadData();" />
            </div>
        </form>
    </body>
    </html>

希望它能像它帮助我一样帮助别人。

【讨论】：