Question

请您帮我突出显示自动完成文本框中的输入字词。我已经填充了自动填充单词，我只需要突出显示单独输入的单词。我是Jquery自动完成的新手

我将输出作为文本<Strong>Br</Strong>ijesh //看作文本
而不是单独强调 Br 。

以下是摘录

$(document).ready(function () {
$("#studentName").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Webservice.asmx/GetStudentNames",
            data: "{'prefixText':'" + request.term + "'}",
            dataType: "json", 
            success: function (data) {
           var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
                response($.map(data.d, function (item) {
                    return {
                    label: item.split('|')[0].replace(regex, "<Strong>$1</Strong>"),
                    val: item.split('|')[1]
                    }
                }))
            },

            failure: function (response) {
                ServiceFailed(result);
            }
        });
    },
    select: function (event, ui) {
     txtStudent(ui.item.val, ui.item.label); //Student name and id used in this method
    },
    minLength: 2
});
});              // End of ready method

请帮帮我。

Answer 1

在我看来，您应该覆盖_renderItem方法以自定义呈现项目。代码可以是以下内容：

$("#studentName").autocomplete({/* all your parameters*/})
    .data("autocomplete")._renderItem = function (ul, item) {
        var newText = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<div>" + newText + "</div>")
            .appendTo(ul);
    };

在代码中我使用jQuery UI CSS“ui-state-highlight”进行突出显示。您可以改用<strong>。此外，我不包含可以逃避RegEx内任何this.term个字符的代码。我只想解释一下这个主要想法。例如，请查看the answer以获取更多信息。

更新：更新版本的jQuery UI使用.data("ui-autocomplete")代替.data("autocomplete")。为了使您的代码在（旧的和新的）jQuery版本中工作，您可以执行以下操作：

var $elem = $("#studentName").autocomplete({/* all your parameters*/}),
    elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete");
if (elemAutocomplete) {
    elemAutocomplete._renderItem = function (ul, item) {
        var newText = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<div>" + newText + "</div>")
            .appendTo(ul);
    };
}

更新2 ：同样，名称"item.autocomplete"应更改为"ui-autocomplete-item"。请参阅here。

Answer 2

对于jQuery UI中的正确渲染 - v1.12.1使用＆＃34; div＆＃34;，而不是＆＃34; a＆＃34;

$args = array(
    'order' => 'ASC', //or DESC
    'orderby' => 'name',
    'parent' => 0
); 
$terms = get_terms( 'product_cat', $args );

if ( $terms ) {
    echo '<ul class="products">';
    foreach ( $terms as $term ) {
         echo '<li>' . $term->name . '</li>';
    }
    echo '</ul>';
}

Answer 3

我们也可以像这样实现它。

 $("#studentName").autocomplete({/* all your parameters*/});
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {        
        var t = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + t + "</a>")
            .appendTo(ul);
    };

Answer 4

如果您正在使用新的JQueryUI，您应该替换它：

.data("autocomplete")._renderItem

到此：

.data("uiAutocomplete")._renderItem

Answer 5

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
};

使用此

Answer 6

这是我用来使其工作的代码（不区分大小写）：

open: function (e, ui) {
      var acData = $(this).data('ui-autocomplete');
      acData.menu.element.find('li').each(function () {
         var me = $(this);
         var keywords = acData.term.split(' ').join('|');
         me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<strong>$1</strong>'));
      });
   }

如何突出显示自动完成jquery ui中的输入单词

6 个答案: