Merge branch 'feature/LF3185/filter-without-highlighting-for-html-lis…

…t' into 'master'

Feature/lf3185/filter without highlighting for html list

See merge request lfor/autocomplete-lhc!173

CHANGELOG.md

@@ -3,6 +3,10 @@
 This log documents significant changes for each release.  This project follows
 [Semantic Versioning](http://semver.org/).
 
+## [19.3.1] - 2024-11-13
+### Changed
+- Filter without highlighting for Prefetch autocomplete with isListHTML true.
+
 ## [19.3.0] - 2024-10-10
 ### Added
 - new Prefetch option: isListHTML. Defaults to false. When set to true, display

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "autocomplete-lhc",
-  "version": "19.3.0",
+  "version": "19.3.1",
   "main": [
     "source/auto_completion.css",
     "source/polyfill.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "autocomplete-lhc",
-  "version": "19.3.0",
+  "version": "19.3.1",
   "description": "",
   "main": "source/index.js",
   "config": {

source/autoCompPrefetch.js

@@ -152,10 +152,8 @@
        *     for display. Filtering does not cover content in this formatted list.</li>
        *    <li>isListHTML - Defaults to false. When set to true, display the list
        *     as HTML. This should only be used when you know the list content can be
-       *     safely displayed as HTML. There should not be "<" or ">" in the text
-       *     content as filtering might not work as expected. With multi-select, make
-       *     sure the list values, which are texts with HTML tags removed, are unique
-       *     in the list.</li>
+       *     safely displayed as HTML. With multi-select, make sure the list values,
+       *     which are texts with HTML tags removed, are unique in the list.</li>
        *  </ul>
        */
       initialize: function(id, listItems, options) {
@@ -311,26 +309,6 @@
       },
 
 
-      /**
-       * Checks whether an HTML string has equal number of '<' and'>', so the end of the string
-       * is not inside an HTML tag.
-       * @param value an HTML string.
-       * @returns true if there are an equal number of '<' and '>', false otherwise.
-       */
-      isHtmlTagsClosed_: function(value) {
-        const openTagCount = (value.match(/</g) || []).length;
-        const closeTagCount = (value.match(/>/g) || []).length;
-        if (openTagCount === closeTagCount) {
-          return true;
-        } else if (openTagCount - closeTagCount === 1) {
-          return false;
-        } else {
-          console.error("The numbers of opening and closing tags might not be right: " + value);
-          return false;
-        }
-      },
-
-
       /**
        *  Generates the list of items that match the user's input.  This was
        *  copied from the Scriptaculous controls.js Autocompleter.Local.prototype
@@ -375,8 +353,6 @@
 
         if (instance.options.ignoreCase)
           entry = entry.toLowerCase();
-        if (isListHTML)
-          entry = Def.Autocompleter.Base.escapeAttribute(entry);
         var formattedListItems = instance.options.formattedListItems;
         for (var i=0, max=instance.rawList_.length; i<max; ++i) {
           var tmp = instance.indexToHeadingLevel_[i];
@@ -427,16 +403,16 @@
             if (!matchInItemNum && !useFullList) {
               // See if it matches the item at the beginning
               var foundMatch = false;
-              var elemComp = rawItemText;
+              var elemComp = isListHTML ? instance.rawListWithoutTags_[i] : rawItemText;
               if (instance.options.ignoreCase)
-                elemComp = rawItemText.toLowerCase();
+                elemComp = elemComp.toLowerCase();
               var foundPos = elemComp.indexOf(entry);
               while (!foundMatch && foundPos !== -1) {
                 if (foundPos === 0) {
                   ++totalCount;
                   foundMatch = true;
                   if (totalCount <= maxReturn) {
-                      itemText = '<strong>' +
+                      itemText = isListHTML ? rawItemText : '<strong>' +
                           escapeHTML(rawItemText.substr(0, entry.length)) + '</strong>' +
                           escapeHTML(rawItemText.substr(entry.length));
                     if (formattedListItems)
@@ -445,15 +421,13 @@
                 }
                 else { // foundPos > 0
                   // See if the match is at a word boundary
-                  if ((instance.options.fullSearch ||
-                      /(.\b|_)./.test(elemComp.substr(foundPos-1,2))) &&
-                    // See if the match is inside an HTML tag, when isListHTML is true
-                    (!isListHTML || instance.isHtmlTagsClosed_(elemComp.substr(0, foundPos)))) {
+                  if (instance.options.fullSearch ||
+                      /(.\b|_)./.test(elemComp.substr(foundPos-1,2))) {
                     ++totalCount;
                     foundMatch = true;
                     if (totalCount <= maxReturn) {
                         var prefix = escapeHTML(rawItemText.substr(0, foundPos));
-                        itemText = prefix + '<strong>' +
+                        itemText = isListHTML ? rawItemText : prefix + '<strong>' +
                             escapeHTML(rawItemText.substr(foundPos, entry.length)) +
                             '</strong>' +
                             escapeHTML(rawItemText.substr(foundPos + entry.length));

test/cypress/integration/prefetchLists.cy.js

@@ -190,20 +190,21 @@ describe('Prefetch lists', function() {
     cy.get('#prefetch_html').should('have.value', 'I am strong');
   });
 
-  it('should filter and highlight correctly when isListHTML is true', function() {
+  it('should filter without highlighting when isListHTML is true', function() {
     po.openTestPage();
     cy.get('#prefetch_html')
       .focus();
     cy.get('#completionOptions li')
       .should('have.length', 3);
-    // Should only match and highlight the text outside an HTML tag.
+    // Should only match the text outside an HTML tag,
+    // showing the original HTML item without highlighting the match.
     cy.get('#prefetch_html')
       .type('strong');
     cy.get('#completionOptions li')
       .should('have.length', 1);
     cy.get('#completionOptions li')
       .eq(0)
-      .should('have.html', '<i title="I am strong.">I am <strong>strong</strong></i>');
+      .should('have.html', '<i title="I am strong.">I am strong</i>');
     // The value in the field should be the original HTML option after the user selects the highlighted option.
     cy.get('#completionOptions li')
       .eq(0)