plugin jQuery autocomplete - Fonction de mise en surbrillance personnalisée

Question

Mes résultats autocomplete pour chaque élément ressemble à ceci:

<h3>Celebrity Sweepstakes</h3><p>0 episodes</p> 

Mais je veux que le titre à l'intérieur du H3 à mettre en valeur. Voir la fonction 'highlight' ci-dessous. Je ne suis pas sûr de savoir comment changer ce RegExp original pour le remplacer uniquement dans le titre.

$(".show_autocomplete").autocomplete("/shows.js", { 
     minChars: 2, 
     max: 100, 
    formatItem:function(item, index, total, query){ 
    return "<h3>" + item.title + "</h3><p>" + item.episodes + " episodes</p>" 
    }, 
    formatMatch:function(item){ 
    return item.title; 
    }, 
    formatResult:function(item){ 
    return item.title; 
    }, 
    dataType:'json', 
    parse:function(data) { 
    return $.map(data, function(item) { 
     return { 
     data: item, 
     value: item.title, 
     result: item.title 
     } 
    }); 
    }, 
    highlight: function(value, term) { 
    var title = value.split("</h3>")[0].replace("<h3>", ""); //only replace inside this? 
    return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"); //original regexp 
    } 
}); 

Answer 1

Pourquoi le rendre plus difficile que c'est juste? :) C'est ce que j'ai eu de votre idée et fonctionne très bien:

formatItem:function(item, index, total, query){ 
    return "<h3><a href=\"/show/" + item.permalink + "\">" + item.title + "</a></h3><p>" + item.followers + " followers | " + item.episodes + " episodes</p>" 
    }, 

    highlight: function(value, term) { 
    var value = $(value); 
    value.find("a").html(value.find("a").html().replace(RegExp(term, "gi"), "<strong>" + term + "</strong>")); 
    return value; 
    } 

Answer 2

La meilleure façon de résoudre ce problème est de le décomposer un peu plus loin. Mis à part le fait qu'il n'est pas seulement appliqué au contenu <h3>, l'implémentation actuelle fonctionne-t-elle normalement?

Si c'est le cas, alors, au lieu de compliquer l'expression rationnelle, vous pouvez séparer la fonctionnalité juste un peu. Ajoutez le code pour identifier et extraire le titre/<h3> -content, puis effectuez la surbrillance sur cela avec le code que vous avez actuellement. Ensuite, prenez les résultats et combinez-les avec le reste de l'entrée d'origine et le tour est joué, <h3> -seulement en surbrillance.

Un avantage secondaire est que cette approche est susceptible de rendre vos intentions significativement plus claires qu'une regex compliquée, facilitant la maintenance future, si d'autres ajustements sont nécessaires.