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