Jquery 自动完成组合框\类别 - 搜索 optgroup 标签答案

【问题标题】：Jquery autocomplete combobox\category - search optgroup labelsJquery 自动完成组合框\类别 - 搜索 optgroup 标签
【发布时间】：2012-06-21 19:52:58
【问题描述】：

基于我之前提出的一个问题here

我正在使用 jquery ui 自动完成来创建一个自动完成表单。在您的帮助下，我成功地将它的组合框和类别选项组合在一起。现在经过思考，我正试图将其提升到另一个层次。

我想做的是能够让组合框也搜索 optgroup 标签以及选项文本。如果文本与 optgroup 标签匹配，则会显示整个类别，但仍会搜索选项文本。

我猜编辑需要在下面的块中进行。

 response(select.find("option").map(function() {
                    var text = $(this).text();
                    if (this.value && (!request.term || matcher.test(text))) return {
                        label: text.replace(
                        new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                        value: text,
                        option: this,
                        category: $(this).closest("optgroup").attr("label")
                    };              
                }).get());

jsfiddle

【问题讨论】：

好主意！那么是什么阻止你这样做呢？
我的小脑袋。我不知道该怎么做。
那么这很难回答，我的意思是我们不想建议你换个新大脑，对吧？ ;) 所以试着找出你遇到障碍的地方并分享你的问题。
好吧，我一开始就卡住了。我想第一步是让它匹配 optgroup 标签以及选项文本。我不确定需要在哪里进行修改才能实现这一点，我也不太确定如何编写它以使其匹配 2 种不同的元素类型（optgroup、option）。

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

您发现了代码的正确部分。这是一个修改后的版本，它也包含在类别中：

response(select.find("option").map(function() {
    var text = $(this).text(),
        category = $(this).closest("optgroup").attr("label");
    if(this.value && (!request.term || matcher.test(text) || matcher.test(category))) return {
        label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
        value: text,
        option: this,
        category: category.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>")
    };
}).get());

除了匹配选项文本（matcher.test(text)），我还尝试匹配选项组标签：matcher.test(category)。
我还添加了一个正则表达式替换来强调类别中的匹配文本。

（我无法在 my update of your jsfiddle example 中进行最后一次修改，但它对我正在处理的项目非常有用）

【讨论】：