jQuery autocomplete plugin – fonction de surbrillance personnalisée

Mes résultats d’auto-complétion pour chaque élément ressemblent à ceci:

Celebrity Sweepstakes

0 episodes

Mais je veux que seul le titre à l’intérieur du H3 soit mis en évidence. Voir la fonction ‘surbrillance’ ci-dessous. Je ne suis pas sûr de savoir comment changer cette RegExp originale pour ne la remplacer que dans le titre.

 $(".show_autocomplete").autocomplete("/shows.js", { minChars: 2, max: 100, formatItem:function(item, index, total, query){ return "

" + item.title + "

" + item.episodes + " episodes

" }, 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("")[0].replace("

", ""); //only replace inside this? return value.replace(new RegExp("(?![^&;]+;)(?!<[^]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^]*>)(?![^&;]+;)", "gi"), "$1"); //original regexp } });

Cela pourrait être mieux résolu en le décomposant un peu plus loin. Mis à part le fait qu’il n’est pas appliqué uniquement au contenu

, la mise en œuvre actuelle fonctionne-t-elle autrement comme souhaité?

Si tel est le cas, au lieu de rendre la regex plus compliquée, vous pouvez séparer un peu la fonctionnalité. Ajoutez du code pour identifier et extraire le contenu /

-content, puis mettez-le en surbrillance avec le code que vous avez actuellement. Ensuite, prenez les résultats et combinez-les avec le rest de l’entrée d’origine et le tour est joué,

uniquement.

Un autre avantage est que cette approche rendra vos intentions beaucoup plus claires qu’un regex compliqué, facilitant la maintenance future, si d’autres ajustements étaient nécessaires.

Pourquoi le rendre plus difficile que ce qui est juste? 🙂 Voici ce que j’ai eu de votre idée et fonctionne très bien:

  formatItem:function(item, index, total, query){ return "

" + item.title + "

" + item.followers + " followers | " + item.episodes + " episodes

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