Question

我使用Jquery实现了自动完成功能。我还实现了突出显示匹配的文本。我正在使用＆lt; strong＆gt;标签在高光功能。当我使用键盘箭头逐个浏览自动完成下拉菜单时，文本框中会显示我当前所在的文本。显示时，显示＆lt; strong＆gt;标签。有关删除标签的建议吗？我在下面给出了我的代码。

enter image description here

<input type="text" id="institution-list"/>

<script type="text/javascript" language="javascript">
$(function () {
    $("#institution-list").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/home/findinstitutions", type: "POST", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: highlight(item.InstitutionName, request.term),
                            id: item.InstitutionId
                        };
                    }));

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

function highlight(s, t) {
    var matcher = new RegExp("(" + $.ui.autocomplete.escapeRegex(t) + ")", "i");
    return s.replace(matcher, "<strong>$1</strong>");
}
</script>

Answer 1

我认为问题在于您正在使用最近找到的数据的标签并将其呈现为HTML而不是纯文本。因此，代替Berkeley，您的自动填充功能会显示<strong>Ber</strong>keley。

尝试解析并删除任何HTML标记，然后再显示它：

function sanitize(text){
   var regex = /(<([^>]+)>)/ig;
   return text.replace(regex, "");
}

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

正则表达式是从这里提取的：Remove HTML Tags in Javascript with Regex

Answer 2

在下面找到我为我的问题找到的解决方案

现有代码：

response($.map(data, function (item) {
                    return { label: highlight(item.InstitutionName, request.term),
                        id: item.InstitutionId
                    };

解决方案：

response($.map(data, function (item) {
                    return { label: highlight(item.InstitutionName, request.term),
                        value: item.InstitutionName, 
                        id: item.InstitutionId
                    };

原始代码返回了标签（嵌入了html标签）并且没有值。由于没有值，文本框使用标签显示。现在，我明确地使用我的文本（没有html标签）分配文本框的值，这解决了我的问题。

以下是现在如何显示的快照。

Autocomplete - After fix

从文本框中删除<strong> </strong>

2 个答案: