Resalte Autocompletar IU de jQuery

Question

Estoy usando la función de autocompletar en jQuery UI 1.8.6. Y quiero resaltar los resultados coincidentes. Pero por alguna razón cuando uso una expresión regular para agregar etiquetas "fuertes" alrededor de los caracteres coincidentes, la cadena se está escapando. Entonces veo [strong]matching chars[/strong], en lugar de texto marcado.

Este es el javascript Actualmente estoy usando:

$(function() { 

    $("#autocompleteinputfield").autocomplete({ 
     source: function (request, response) { 

      $.ajax({ 
       url: "someservice", 
       type: "GET", 
       dataType: "json", 
       data: { filter: request.term, maxResults: 10 }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         // return { label: item.ID + ' - ' + item.Name, id: item.ID, value: item.Name } 
         var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"); 

         return { label: (item.ID + ' - ' + item.Name).replace(regex, "<strong>$1</strong>"), 
           id: item.ID, 
           value: item.Name 
           } 

        })) 
       } 
      }); 
     }, 
     select: function (event, ui) { 
      alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id) 
        : "Nothing selected, input was " + this.value); 
     } 
    }); 

}); 

Actualización:

"Entrada" es el texto introducido en un cuadro de texto (en este caso: [input type = "text" id = "autocompleteinputfield" /]

de salida es el siguiente:

[{ "Descripción": "No hay nada significativo", "ID": 3, "Nombre": "Joe Public"}]

Answer 1

El código fuente de autocompletado de jQuery es el culpable. Si nos fijamos en los archivos javascript reales, encontrará esta definición para la visualización de elementos de la lista de autocompletar:

_renderItem: function(ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append($("<a></a>").text(item.label)) 
     .appendTo(ul); 
} 

Verás que está añadiendo ".text (item.label)", que hace que el HTML para escaparse Para resolver esto, debe ejecutar un truco para anular este método "_renderItem", reemplazando la línea que agrega la etiqueta como texto sin formato con una línea que agrega la etiqueta como html. Así que actualizar el código de la siguiente manera:

$(function() { 
    $("#autocompleteinputfield").autocomplete({ 
     // leave your code inside here exactly like it was 
    }) 
    .data('autocomplete')._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append('<a>' + item.label + '</a>') 
      .appendTo(ul); 
    }; 
}); 

Actualización: Con la versión> = 1,10 de jQuery, hay algunas pequeñas modificaciones:

$(function() { 
    $("#autocompleteinputfield").autocomplete({ 
     // leave your code inside here exactly like it was 
    }) 
    .data('ui-autocomplete')._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("ui-autocomplete-item", item) 
      .append('<a>' + item.label + '</a>') 
      .appendTo(ul); 
    }; 
}); 

Answer 2

La alerta de JavaScript simple() no muestra html. Considera usar un modal u otra cosa. O como dijeron los demás, publique alguna entrada/salida específica.

Answer 3

$.extend($.ui.autocomplete.prototype, { 
    _renderItem: function (ul, item) { 
     var searchMask = this.element.val(); 
     var regEx = new RegExp(searchMask, "ig"); 
     var replaceMask = "<b style=\"color:green;\">$&</b>"; 
     var html = item.label.replace(regEx, replaceMask); 

     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append($("<a></a>").html(html)) 
      .appendTo(ul); 
    } 
});