Allow selection of resultItems by class instead of tag

[benjamingries]

Hi,

thank you for this wonderful plugin. We use it in many projects for displaying autosuggestions.

After some debugging in one of our lasts projects we've like to suggest an enhancement to make this plugin even better.

On one of our client websites we render the autosuggestion list in different groups (see image below). To achieve this, we rearrange the list by using resultsList.element option:

const renderResultsListInGroup = (list, results, identifier, title = '') => {
    if (!results.length) {
        return;
    }

    if (title) {
        const header = document.createElement('li');

        header.classList.add('autocomplete__item', 'autocomplete__item--title');
        header.innerHTML = title;

        list.appendChild(header);
    }

    results.forEach((result, index) => {
        const element = document.createElement('li');

        element.classList.add('autocomplete__item', `autocomplete__item--${identifier}`);
        element.setAttribute('id', `autoComplete_result_${identifier}_${index}`);
        element.setAttribute('role', 'option');
        element.innerHTML = result;

        list.appendChild(element);
    });
};

const renderResultsListInGroups = (list, data, form) => {
    const { results } = data;
    const defaultResults = [];
    const articleResults = [];

    results.forEach((result) => {
        if (result.value.type === 'article') {
            articleResults.push(result.match);
        } else {
            defaultResults.push(result.match);
        }
    });

    list.innerHTML = '';

    renderResultsListInGroup(list, defaultResults, 'default');
    renderResultsListInGroup(list, articleResults, 'article', form.getAttribute('data-top-results-title'));
};

const autoCompleteJS = new AutoComplete({
    selector: () => input,
    data: {
        src: async (query) => getSuggestions(query, form),
         keys: ['keyword'],
    },
    submit: true,
    wrapper: false,
    resultsList: {
        class: 'autocomplete autocomplete--suggestions',
        maxResults: 15,
        element: (list, data) => renderResultsListInGroups(list, data, form),
    },
    resultItem: {
        class: 'autocomplete__item',
        highlight: 'strong',
    },
});

The problem is that all indices after the title (German: 'Top Treffer') are now calculated incorrectly, because there is a additional li tag (for the title) without a corresponding result. We have to declare it as li tag, because only li tags are allowed inside of ul tag.

We could solve this on our own by setting other tag options for resultsList and resultItem and declare the title as header tag (or something like that):

const renderResultsListInGroup = (list, results, identifier, title = '') => {
    ...

    if (title) {
        const header = document.createElement('header');
        ...
    }

    results.forEach((result, index) => {
        const element = document.createElement('div');
        ...
    });
};

...

const autoCompleteJS = new AutoComplete({
    ...
    resultsList: {
        tag: 'div',
        ...
    },
    resultItem: {
        tag: 'div',
        ...
    },
});

But we want to keep the good semantics with the list element in place. For that this plugin needs to adjust the calculation of indices (from a tag based to a class based selector).

What do you think about our suggestion? If you like it, we can implement this for you.