Autocomplete with many keys and datas

[Neosm]

I'm sorry for my English, i'm French.
I have a problem, I want an autocomplete from 2 data's sources (User and Articles).
If I use an only key like this :
{name: user 1}, {name: user 2}, {name: article 1}... I can search but the key is "Name" I don't want that.

If I do
{user : user 1, article : article 1}, {user : user 2, article : article 2}, {user : user 3 article : article 3}, {user : user 4}, {user : user 5} I have Cannot read property 'toString' of undefined error

I want something like
{user : user 1}, {user : user 2}, {article : article 1}, {article : article 2}, {user : user 3}, {article : article 3}, {user : user 4}, {user : user 5}
To see values and keys on my search form. But I have an Cannot read property 'toString' of undefined error

How can I do this without error?

[TarekRaafat]

Hello @Neosm,

In your case, you'll need a custom searchEngine algorithm as shown below.

const autoCompleteJS = new autoComplete({
  data: {
    src: [
      { user: "User 1" },
      { user: "User 2" },
      { article: "Article 1" },
      { article: "Article 2" },
      { user: "User 3" },
      { article: "Article 3" },
      { user: "User 4" },
      { user: "User 5" },
    ],
    cache: true,
  },
  searchEngine: (query, record) => {
    query = query.toLowerCase();
    const user = record.user;
    const article = record.article;

    if (user && user.toLowerCase().includes(query)) {
      return user;
    }

    if (article && article.toLowerCase().includes(query)) {
      return article;
    }

    return false;
  },
}

Please, try it and let me know how it goes. :)

[Neosm]

Thank you,
The search is done, but I had added the "recent search" which does not work anymore, and when you choose a result the select does not work. On the other hand the "highlight: true" is not done and the display of the keys in the dropdown shows "Undifined".

I'm sorry that's a lot of questions, but it's my very first project and so I'm still struggling, even if it seems logical.

My js :

`const autoCompleteJS = new autoComplete({
    data: {
        src: async () => {
            try {
                // Loading placeholder text
                document
                    .getElementById("autoComplete")
                    .setAttribute("placeholder", "Loading...");
                // Fetch External Data Source
                const source = await fetch(
                    "/header/search"
                );
                const data = await source.json();
                // Post Loading placeholder text
                document
                    .getElementById("autoComplete")
                    .setAttribute("placeholder", autoCompleteJS.placeHolder);
                // Returns Fetched data
                return data;
            } catch (error) {
                return error;
            }
        },
        keys: ["user"]["article"],
        cache: true,
        filter: (list) => {
            // Filter duplicates
            // incase of multiple data keys usage
            const filteredResults = Array.from(
                new Set(list.map((value) => value.match))
            ).map((user) => {
                return list.find((value) => value.match === user);
            });
            return filteredResults;
        },
    },
    searchEngine: (query, record) => {
        query = query.toLowerCase();
        const user = record.user;
        const article = record.article;

        if (user && user.toLowerCase().includes(query)) {
            return user;
        }
        if (article && article.toLowerCase().includes(query)) {
            return article;
        }
        return false;
    },
    placeHolder: "Rechercher Utilisateurs & Leçons & Programme & Articles",
    resultsList: {
        element: (list, data) => {
            const recentSearch = history.reverse();
            const historyLength = recentSearch.length;

            // Check if there are recent searches
            if(historyLength) {
                const historyBlock = document.createElement("div");
                historyBlock.setAttribute("style", "display: flex; flex-direction: column; margin: .3rem; padding: .3rem .5rem;");
                historyBlock.innerHTML = "Dernières recherches";
                // Limit displayed searched to only last "2"
                recentSearch.slice(0, 3).forEach((item) => {
                    const recentItem = document.createElement("span");
                    recentItem.setAttribute("style", "display: flex; margin: .2rem; color: rgba(0, 0, 0, .2);");
                    recentItem.innerHTML = item;
                    historyBlock.append(recentItem);
                });

                const separator = document.createElement("hr");
                separator.setAttribute("style", "margin: 5px 0 0 0;");
                historyBlock.append(separator);

                list.prepend(historyBlock);
            }
            const info = document.createElement("p");
            if (data.results.length > 0) {
                info.innerHTML = `Affichage de <strong>${data.results.length}</strong> résultats sur <strong>${data.matches.length}</strong>`;
            } else {
                info.innerHTML = `<strong>${data.matches.length}</strong> résultat correspondant à <strong>"${data.query}"</strong>`;
            }
            list.prepend(info);
        },
        noResults: true,
        maxResults: 15,
        tabSelect: true
    },
    resultItem: {
        element: (item, data) => {
            // Modify Results Item Style
            item.style = "display: flex; justify-content: space-between;";
            // Modify Results Item Content
            item.innerHTML = `
      <span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
        ${data.match}
      </span>
      <span style="display: flex; align-items: center; font-size: 13px; font-weight: 100; text-transform: uppercase; color: rgba(0,0,0,.2);">
        ${data.key}
      </span>`;
        },
        highlight: true
    },
    events: {
        input: {
            focus: () => {
                if (autoCompleteJS.input.value.length) autoCompleteJS.start();
            },
            selection: (event) => {
                const feedback = event.detail;
                const input = autoCompleteJS.input;
                // Get selected Value
                const selection = feedback.selection.value[feedback.selection.key].trim();
                // Add selected value to "history" array
                history.push(selection);
                autoCompleteJS.input.value = selection;
            }
        }
    }
});`