突出显示jQuery UI自动完成 [英] Highlight jQuery UI autocomplete

问题描述

我正在jQuery UI 1.8.6中使用自动完成功能.我想突出显示匹配的结果.但是由于某种原因，当我使用正则表达式在匹配字符周围添加"strong"标签时，该字符串已被转义.所以我看到的是[strong]matching chars[/strong]，而不是标记的文本.

I'm using the autocomplete function in jQuery UI 1.8.6. And I want to highlight matching results. But for some reason when I use a regex to add "strong" tags around the matching characters, the string is being escaped. So I see [strong]matching chars[/strong], instead of marked up text.

这是我当前正在使用的javascript:

This is the javascript I'm currently using:

$("#autocompleteinputfield").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "someservice",
            type: "GET",
            dataType: "json",
            data: { filter: request.term, maxResults: 10 },
            success: function (data) {
                response($.map(data, function (item) {
                    // return { label: item.ID + ' - ' + item.Name, id: item.ID, value: item.Name }
                    var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/ ([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/ gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");

                    return {
                        label: (item.ID + ' - ' + item.Name).replace(regex, "<strong>$1</strong>"),
                        id: item.ID,
                        value: item.Name
                    }

                }))
            }
        });
    },
    select: function (event, ui) {
        alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
            : "Nothing selected, input was " + this.value);
    }
});

更新:

输入"是在文本框中输入的文本(在本例中为[input type="text" id="autocompleteinputfield" /]

"Input" is the text entered in a textbox (in this case : [input type="text" id="autocompleteinputfield" /]

输出看起来像这样:

[{"Description":"Nothing meaningful","ID":3,"Name":"Joe Public‎"}]

推荐答案

jQuery自动完成源代码是罪魁祸首.如果您查看实际的javascript文件，则会在自动完成列表中找到用于显示项目的以下定义:

The jQuery autocomplete source code is the culprit. If you look in the actual javascript files, you'll find this definition for displaying items in the autocomplete list:

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( $( "<a></a>" ).text( item.label ) )
        .appendTo( ul );
}

您将看到它附加了".text(item.label)"，这导致html被转义.为了解决这个问题，您必须摆弄一些技巧以覆盖此"_renderItem"方法，用将标签附加为纯文本的行替换为将标签附加为html的行.因此，像这样更新您的代码:

You'll see it's appending ".text(item.label)" which causes the html to be escaped. To solve this, you kind of have to put in a hack to override this "_renderItem" method, replacing the line that appends the label as plain text with a line that appends the label as html. So update your code like this:

$(function () {
    $("#autocompleteinputfield").autocomplete({
        // leave your code inside here exactly like it was
    })
    .data('autocomplete')._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( '<a>' + item.label + '</a>' )
            .appendTo( ul );
    };
});

更新:对于jQuery> = 1.10版本，有一些小的修改:

$(function () {
    $("#autocompleteinputfield").autocomplete({
        // leave your code inside here exactly like it was
    })
    .data('ui-autocomplete')._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "ui-autocomplete-item", item )
            .append( '<a>' + item.label + '</a>' )
            .appendTo( ul );
    };
});

这篇关于突出显示jQuery UI自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！