Selection data missing on 3rd, 4th and 5th elements of search results.

[arvindhunireo]

When a 3rd, 4th or 5th item selected on result list, it only emits index. But first two elements emits all the related values of selection. How to make all the 5 items to emit all of their values ? For example,

When i console log

autoCompleteJS.input.addEventListener("selection", function (event) {
        const feedback = event.detail;
        console.log(feedback);
}

This is the result for first two items

And now this is the result of 3rd, 4th and 5th items:

When checking documentation, i couldn't find any thing related to it. Please guide, what if users directly selects 5th item instead of 1st. ?

[TarekRaafat]

Hello @arvindhunireo,

I've tried replicating your issue but kept getting the normally expected results.

Could you please share your autoComplete.js config?

[arvindhunireo]

Here is my config:

<script>
    const autoCompleteJS = new autoComplete(
        {
            placeHolder: "Type to search",
            data: {
                src: async (query) => {
                  try {
                    const source = await fetch(`/search/query?term=${query}`);
                    const data = await source.json();
                    return data.data;
                  } catch (error) {
                    return error;
                  }
                },
                keys: ["name"],
            },
            events: {
                input: {
                    focus() {
                        autoCompleteJS.start(" ");
                    },
                },
            },
            resultItem: {
                element: (item, data) => {
                        item.innerHTML = 
                        `<div style="mb-2">
                            <div class="d-flex flex-row justify-content-between">
                                <h6 class="title" style="margin-bottom:unset">${data.match}</h6>
                                <span class="text-soft" style="font-size:11px">Course</span>
                            </div>
                            <div class="nk-block-des text-soft">
                                <ul class="list-inline">
                                    <li><span style="font-size: 11px;">Type: ${data.value.type}</span></li>
                                    <li><span style="font-size: 11px;">Course Duration: ${data.value.duration}</span></li>
                                </ul>
                            </div>
                        </div>`
                },
                highlight: true
            },
        }
    );

    autoCompleteJS.input.addEventListener("selection", function (event) {
        const feedback = event.detail;
        console.log(feedback);
    });
</script>

Problem is that. 1st and 2nd elements gives "Index, match and value" from "selection" event. But 3rd, 4th and 5th only receives "Index" and thus "match and value" are missing. Is this an expected behavior ? I believe am just confused

[TarekRaafat]

Got it! :)

The default resultsList.maxResults value is 5; that's why when the selection exceeds that value, it returns undefined.

The solution is to extend the resultsList.maxResults value to the desired value.

Try it and let me know how it goes.