Cómo resaltar palabras de entrada en autocompletar jquery ui

Question

Podría ayudarme a poner de relieve las palabras escritas en el cuadro de texto de autocompletar. ya estoy poblando las palabras de autocompletar y tengo que acaba de poner de relieve las palabras escritas alone.i soy nuevo en jQuery autocompletado

que estoy recibiendo la salida como texto como <Strong>Br</Strong>ijesh // visto como texto
y no como destacando la Br solo.

A continuación se muestra el fragmento de

$(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 debe sobrescribir el método _renderItem para tener una representación personalizada de los elementos. El código podría ser acerca de 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("<a>" + newText + "</a>") 
      .appendTo(ul); 
    }; 

En el código que utiliza jQuery UI CSS "ui-estado-resalte" para poner de relieve. Puede usar <strong> en su lugar. Además, no incluyo el código que escaparía de los caracteres RegEx que podrían estar dentro de this.term. Solo quería explicarte la idea principal. Mira the answer por ejemplo para información adicional.

ACTUALIZADO: Más versiones recientes de jQuery UI utiliza .data("ui-autocomplete") en lugar de .data("autocomplete"). Para que el código de trabajo en versiones tanto (antiguos y nuevos) de jQuery que 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("<a>" + newText + "</a>") 
      .appendTo(ul); 
    }; 
} 

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

Answer 2

Si está utilizando nueva jQueryUI, debe reemplazar esto:

.data("autocomplete")._renderItem 

a esto:

.data("uiAutocomplete")._renderItem 

Answer 3

también podemos implementarlo como este.

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

Para un correcto renderizado en jQuery UI - v1.12.1 utilizan "div", no "un"

$.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 5

$ .ui.autocomplete.prototype._renderItem = function (ul, elemento) { item.label = item.label.replace (new RegExp ("(?! [^ &;] +;) (?! < [^ <>] ) (" + $ .ui.autocomplete.escapeRegex (this .term) + ") (?! [^ <>]>) (?! [^ &;] +;)", "gi"), "$ 1 "); return $ ("

") .data ("item.autocomplete", elemento) .append ("" + item.label + "") .appendTo (ul); };

Utilice este