jQuery自动完成答案

【问题标题】：Jquery autocompletejQuery自动完成
【发布时间】：2011-09-10 17:29:32
【问题描述】：

嗨，我是JQuery新手，请帮我如何使用jQuery自动完成插件突出显示特定字符。，

我的问题是当我在文本框中输入 xyz 时，通过自动完成，我们可以得到以 xyz 开头的字母并突出显示，但如果请求的字母位于大标签的中间，那么如何突出显示那些字母

所选单词：xyz

我想要的列表应该显示：1)abc xyz 2)bcs xyz

请帮帮我

【问题讨论】：

自动完成将匹配源字符串中任何位置包含键入的单词的单词；除非您使用自定义源（JSON 或回调）。

标签： jquery autocomplete

【解决方案1】：

据我在此示例中所见，它默认突出显示..

http://docs.jquery.com/Plugins/autocomplete

也许您的样式表没有突出显示标签（并非所有浏览器都默认设置）。

【讨论】：

【解决方案2】：

您可以简单地使用替换功能，使用普通字符串替换或使用正则表达式进行更复杂的替换。

var searchQuery = 'xyz'
var searchResult1 = 'abc xyz'
var searchResult2 = 'bcs xyz'

//display abc <b>xyz</b>
var displayResult1 = searchResult1.replace(searchQuery,'<b>'+searchQuery+'</b>');

//display bcs <b>xyz</b>
var displayResult2 = searchResult2.replace(searchQuery,'<b>'+searchQuery+'</b>');

【讨论】：

【解决方案3】：

您可以使用 renderItem 方法自定义 html，您可以从那里突出显示所需的文本。

.data("ui-autocomplete")._renderItem = function (ul, item) {
                if (item.value == '') {
                    return $('<li class="ui-state-disabled" style="padding-left:5px;">' + item.label + '</li>').appendTo(ul);
                }
                var expression = new RegExp(this.term, 'gi');
                var highlight = item.label.replace(expression, "<span style='font-weight:bold;'>" + this.term + "</span>")
                return $("<li>")
                    .append("<a>" + highlight + "</a>")
                    .appendTo(ul);


            }

我找到了这个方法，它对我有帮助，这里我们通过添加粗体标签来突出显示它来编辑数据。您可以在 Jquery Autocomplete Highlight typed text 。这还提供了一个视频教程，以备不时之需。

【讨论】：