Fix #11822: AutoComplete allow control over highlight matches (#11868)

docs/15_0_0/components/autocomplete.md

@@ -42,6 +42,7 @@ AutoComplete provides live suggestions while an input is being typed.
 | escape | true | Boolean | Defines if autocomplete results are escaped or not.
 | forceSelection | false | Boolean | When enabled, autoComplete only accepts input from the selection list.
 | groupByTooltip | null | String | Tooltip to display on group headers.
+| highlightSelector | span | String | jQuery selector specifies what content to identify for highlighting in search results. By default, it targets `<span>` elements.
 | immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component.
 | inputmode | null | String | Hint at the type of data this control has for touch devices to display appropriate virtual keyboard.
 | inputStyle | null | String | Inline style of the input element.

docs/15_0_0/gettingstarted/whatsnew.md

@@ -10,7 +10,9 @@ Look into [migration guide](https://primefaces.github.io/primefaces/15_0_0/#/../
 
 * Core
 
-
+* AutoComplete
+    * Added property `highlightSelector=""` so you can delcare the jQuery selector for what to find and highlight. See https://github.com/primefaces/primefaces/issues/11822 
+
 * Captcha
     * Added [hCaptcha](https://www.hcaptcha.com/) support
 

primefaces/src/main/java/org/primefaces/component/autocomplete/AutoCompleteBase.java

@@ -80,7 +80,8 @@ public enum PropertyKeys {
         completeEndpoint,
         lazyModel,
         lazyField,
-        showEmptyMessage
+        showEmptyMessage,
+        highlightSelector
     }
 
     public AutoCompleteBase() {
@@ -443,4 +444,12 @@ public boolean isShowEmptyMessage() {
     public void setShowEmptyMessage(boolean showEmptyMessage) {
         getStateHelper().put(PropertyKeys.showEmptyMessage, showEmptyMessage);
     }
+
+    public String getHighlightSelector() {
+        return (String) getStateHelper().eval(PropertyKeys.highlightSelector, null);
+    }
+
+    public void setHighlightSelector(String highlightSelector) {
+        getStateHelper().put(PropertyKeys.highlightSelector, highlightSelector);
+    }
 }

primefaces/src/main/java/org/primefaces/component/autocomplete/AutoCompleteRenderer.java

@@ -784,6 +784,7 @@ protected void encodeScript(FacesContext context, AutoComplete ac) throws IOExce
                 .attr("grouping", ac.getValueExpression(AutoComplete.PropertyKeys.groupBy.toString()) != null, false)
                 .attr("queryEvent", ac.getQueryEvent(), null)
                 .attr("dropdownMode", ac.getDropdownMode(), null)
+                .attr("highlightSelector", ac.getHighlightSelector(), null)
                 .attr("autoHighlight", ac.isAutoHighlight(), true)
                 .attr("showEmptyMessage", ac.isShowEmptyMessage(), true)
                 .attr("myPos", ac.getMy(), null)

primefaces/src/main/resources/META-INF/primefaces-p.taglib.xml

@@ -1813,6 +1813,14 @@
             <required>false</required>
             <type>java.lang.Boolean</type>
         </attribute>
+        <attribute>
+            <description>
+                <![CDATA[jQuery selector specifies what content to identify for highlighting in search results. By default, it targets "<span>" elements.]]>
+            </description>
+            <name>highlightSelector</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
         <attribute>
             <description>
                 <![CDATA[Should the empty message be displayed when no items are found? Default is true.]]>

primefaces/src/main/resources/META-INF/resources/primefaces/autocomplete/autocomplete.js

@@ -72,6 +72,7 @@
  * @prop {string} cfg.appendTo ID of the container to which the suggestion box is appended.
  * @prop {string} cfg.atPos Defines which position on the target element to align the positioned element against.
  * @prop {boolean} cfg.autoHighlight Highlights the first suggested item automatically.
+ * @prop {boolean} cfg.highlightSelector Selector specifies what content to identify for highlighting in search results.
  * @prop {boolean} cfg.autoSelection Defines if auto selection of items that are equal to the typed input is enabled. If
  * `true`, an item that is equal to the typed input is selected.
  * @prop {boolean} cfg.cache When enabled autocomplete caches the searched result list.
@@ -127,6 +128,7 @@ PrimeFaces.widget.AutoComplete = PrimeFaces.widget.BaseWidget.extend({
         this.cfg.appendTo = PrimeFaces.utils.resolveAppendTo(this, this.jq, this.panel);
         this.cfg.myPos = this.cfg.myPos || 'left top';
         this.cfg.atPos = this.cfg.atPos || 'left bottom';
+        this.cfg.highlightSelector = this.cfg.highlightSelector || 'span';
         this.cfg.active = (this.cfg.active === false) ? false : true;
         this.cfg.dynamic = this.cfg.dynamic === true ? true : false;
         this.cfg.autoSelection = this.cfg.autoSelection === false ? false : true;
@@ -818,7 +820,7 @@ PrimeFaces.widget.AutoComplete = PrimeFaces.widget.BaseWidget.extend({
                     }
                     var re = new RegExp('(' + queryParts.join('|') + ')', 'gi');
                     var isCustomContent = this.panel.children().is('table');
-                    var queryResults = isCustomContent ? this.panel.children().find('span') : this.items;
+                    var queryResults = isCustomContent ? this.panel.children().find(this.cfg.highlightSelector) : this.items;
                     queryResults.filter(':not(.ui-autocomplete-moretext)').each(function() {
                         var item = $(this);
                         var escape = $this.cfg.escape;