Как выделить вводимые слова в автозаполнении JQuery UI - PullRequest
Новая
       42

Как выделить вводимые слова в автозаполнении JQuery UI

21 голосов
/ 27 марта 2012

Не могли бы вы помочь мне выделить выделенные слова в текстовом поле автозаполнения. Я уже заполняю слова автозаполнения, и мне нужно просто выделить только напечатанные слова. Я новичок в автозаполнении 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

Пожалуйста, помогите мне.

Ответы [ 5 ]

37 голосов
/ 27 марта 2012

Мне кажется, вы должны переписать метод _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.Я хотел объяснить вам только основную идею.Посмотрите, например, ответ для получения дополнительной информации.

ОБНОВЛЕНО : В более поздних версиях пользовательского интерфейса jQuery вместо .data("autocomplete") используется .data("ui-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".Смотрите здесь .

5 голосов
/ 12 января 2017

Для правильного рендеринга в jQuery UI - v1.12.1 используйте «div», а не «a» 

$.ui.autocomplete.prototype._renderItem = function (ul, item) {        
    var t = String(item.value).replace(
            new RegExp(this.term, "gi"),
            "<strong>$&</strong>");
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<div>" + t + "</div>")
        .appendTo(ul);
};
3 голосов
/ 21 августа 2015

мы также можем реализовать это следующим образом. 

 $("#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);
    };
2 голосов
/ 30 октября 2013

Если вы используете новый JQueryUI, вы должны заменить это: 

.data("autocomplete")._renderItem

на это: 

.data("uiAutocomplete")._renderItem
0 голосов
/ 13 января 2017 
$.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);
};

Используйте это

...