jquery-ui - ejemplo - jquery autocomplete select event

Cómo resaltar palabras de entrada en autocompletar jQueri ui

Question

¿Podría ayudarme, por favor, a resaltar las palabras escritas en el cuadro de texto de autocompletar? Ya estoy completando las palabras de autocompletar y solo tengo que resaltar las palabras escritas solo. Soy nuevo en Jquery Autocompletar

<Strong>Br</Strong>ijesh la salida como texto como <Strong>Br</Strong>ijesh // visto como texto
Y no como destacando el Br solo.

A continuación se muestra el fragmento

$(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

Por favor, ayúdame.

Answer 1

Me parece que debería sobrescribir el método _renderItem para tener una representación personalizada de los elementos. El código podría ser sobre lo siguiente:

$("#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);
    };

En el código utilizo jQuery UI CSS "ui-state-highlight" para resaltar. Puedes usar <strong> lugar. Además, no this.term el código que escaparía a ningún carácter RegEx que pudiera estar dentro de este this.term . Quería explicarte solo la idea principal. Mira la respuesta, por ejemplo, para obtener información adicional.

ACTUALIZADO : las versiones más recientes de jQuery UI utilizan .data("ui-autocomplete") lugar de .data("autocomplete") . Para hacer que su código funcione en las versiones (antiguas y nuevas) de jQuery, puede hacer algo como lo siguiente:

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);
    };
}

ACTUALIZADO 2 : De la misma manera, el nombre "item.autocomplete" debe cambiarse a "ui-autocomplete-item" . Ver here

Answer 2

Para una representación correcta en jQuery UI - v1.12.1 use "div", no "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);
};

Answer 3

Si está utilizando un nuevo JQueryUI, debe reemplazar esto:

.data("autocomplete")._renderItem

a esto:

.data("uiAutocomplete")._renderItem

Answer 4

También podemos implementarlo así.

 $("#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 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);
};

Utilizar esta