Mettre en surbrillance la saisie semi-automatique de l'interface utilisateur jQuery

Question

J'utilise la fonction de saisie semi-automatique dans jQuery UI 1.8.6. Et je veux mettre en évidence les résultats correspondants. Mais pour une raison quelconque, lorsque j'utilise une regex pour ajouter des tags "forts" autour des caractères correspondants, la chaîne est en train d'être échappée. Donc, je vois [strong]matching chars[/strong], au lieu de balisé le texte.

C'est le javascript Je suis actuellement en utilisant:

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

}); 

Mise à jour:

"entrée" est le texte entré dans une zone de texte (dans ce cas: [input type = "text" id = "autocompleteinputfield" /]

sortie ressemble à ceci:

[{ "description": "rien de significatif", "ID": 3, "Nom": "Joe public"}]

Answer 1

Le code source de la saisie semi-automatique jQuery est le coupable. Si vous regardez dans les fichiers javascript réels, vous trouverez cette définition pour l'affichage des éléments dans la liste de saisie semi-automatique:

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

Vous verrez qu'il est annexant « .text (item.label) » qui provoque le code html à être échappé. Pour résoudre ce problème, vous devez mettre un hack pour remplacer cette méthode "_renderItem", en remplaçant la ligne qui ajoute l'étiquette en texte brut par une ligne qui ajoute l'étiquette au format html. Donc, mettre à jour votre code comme ceci:

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

Mise à jour: Avec la version> = 1.10 de jQuery, il y a quelques petites modifications:

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

L'alerte javascript simple() n'affiche pas html. Regardez dans l'utilisation d'un modal ou autre chose. Ou comme les autres l'ont dit, afficher des entrées/sorties spécifiques.

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