AutoComplete: Custom HTML content is destoyed by query matches highlighting

[mstichweh]

AutoComplete: Custom HTML content is destoyed by query matches highlighting

[melloware]

how about highlightSelector as a better name since its really a selector?

[melloware]

not sure about the name queryHighlightFilter but i get the idea. It can be span by default for most scenarios and overridden if necessary.

[melloware]

For now here is a MonkeyPatch to do what you want for .ui-autocomplete-item-value

if (PrimeFaces.widget.AutoComplete) {
    PrimeFaces.widget.AutoComplete.prototype.showSuggestions = function(query) {
        this.items = this.panel.find('.ui-autocomplete-item');
        this.items.attr('role', 'option');

        if (this.cfg.grouping) {
            this.groupItems();
        }

        this.bindDynamicEvents();

        var $this = this,
            hidden = this.panel.is(':hidden');

        if (hidden) {
            this.show();
        } else {
            this.alignPanel();
        }

        // #8717 always clear list before trying to fill it
        if (this.cfg.forceSelection) {
            this.currentItems = [];
        }

        if (this.items.length > 0) {
            var firstItem = this.items.eq(0);

            //highlight first item
            if (this.cfg.autoHighlight && firstItem.length) {
                this.highlightItem(firstItem, true);
                this.changeAriaValue(firstItem[0]);
            }

            //highlight query string
            if (query.length > 0) {
                var cleanedQuery = query.trim().replaceAll(/(\s+)/g, ' ');
                if (cleanedQuery.length > 0) {
                    var queryParts = cleanedQuery.split(' ');
                    for (var i = 0; i < queryParts.length; i++) {
                        queryParts[i] = PrimeFaces.escapeRegExp(queryParts[i]);
                    }
                    var re = new RegExp('(' + queryParts.join('|') + ')', 'gi');
                    var isCustomContent = this.panel.children().is('table');
                    var queryResults = isCustomContent ? this.panel.children().find('.ui-autocomplete-item-value') : this.items;
                    queryResults.filter(':not(.ui-autocomplete-moretext)').each(function() {
                        var item = $(this);
                        var escape = $this.cfg.escape;
                        var text = escape ? item.html() : item.text();
                        var escaped_re = escape ? /${PrimeFaces.escapeHTML(text)}/g : /${text}/g;
                        text = text.replace(escaped_re, '$&');
                        item.html(text.replace(re, '<span class="ui-autocomplete-query">$&</span>'));
                    });
                }
            }

            if (this.cfg.forceSelection) {
                this.items.each(function(i, item) {
                    $this.currentItems.push($(item).attr('data-item-label'));
                });
            }

            //show itemtip if defined
            if (this.cfg.autoHighlight && this.cfg.itemtip && firstItem.length === 1) {
                this.showItemtip(firstItem);
            }

            this.displayAriaStatus(this.items.length + this.cfg.resultsMessage);
        } else {
            if (this.cfg.emptyMessage) {
                var emptyText = '<div class="ui-autocomplete-empty-message ui-widget">' + PrimeFaces.escapeHTML(this.cfg.emptyMessage) + '</div>';
                this.panel.prepend(emptyText);
            } else if (!this.cfg.hasFooter) {
                this.panel.hide();
            }

            this.input.removeAttr('aria-activedescendant');
            this.displayAriaStatus(this.cfg.ariaEmptyMessage);
        }
    }
};