Multiples lists on search

[rlidev]

trafficstars

Is there a way to create multiple lists? For example, my data object brings 2 arrays with products and users, how could I show 2 lists with the results? THANK YOU

In this example I am only showing products with data.products

const autoCompleteJS = new autoComplete({ selector: "#autoComplete", placeHolder: "Buscar...", searchEngine: "strict", data: { src: async (query) => { try { const source = await fetch( /search-autocomplete?q=${query}` ); const data = await source.json(); return data.products; } catch (error) { return error; } }, keys: ["title"], },

    resultsList: {
        tag: "ul",
        id: "autoComplete_list",
        class: "results_list",
        destination: "#autoComplete",
        position: "afterend",
        maxResults: 5,
        noResults: true,
        element: (list, data) => {

            if (data.results.length) {
                console.log("asd");
            } else {
                // Create "No Results" message element
                const message = document.createElement("div");
                // Add class to the created element
                message.setAttribute("class", "no_result");
                // Add message text content
                message.innerHTML = `<span>Found No Results for "${data.query}"</span>`;
                // Append message element to the results list
                list.prepend(message);
            }
        },
    },
    resultItem: {
        element: (item, data) => {
            // Modify Results Item Style
            item.style = "display: flex; justify-content: space-between;";
            // Modify Results Item Content
            item.innerHTML = `
            <div class="flex gap-2">
                <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded border">
                    <img
                        src="/storage/img/product/50/${data.value.featured_image.name}.jpg"
                        class="h-full w-full object-contain"
                    />
                </div>
                <div class="whitespace-normal line-clamp-1">
                    ${data.value.title}
                </div>
            </div>`;
            
        },
        highlight: true,
    },
    events: {
        input: {
            focus: (event) => {
                console.log("Input Field in focus!");
                if (autoCompleteJS.input.value.length)
                    autoCompleteJS.start();
            },
            selection: (event) => {
                const selection = event.detail.selection.value;
                autoCompleteJS.input.value = selection;
            },
        },
    },
});`

[trasherdk]

const autoCompleteJS = new autoComplete({
  selector: "#autoComplete",
  placeHolder: "Buscar...",
  searchEngine: "strict",
  data: {
    src: async (query) => {
      try {
        const source = await fetch(`/search-autocomplete?q=${query}`);
        const data = await source.json();
        return data.products;
      } catch (error) {
        return error;
      }
    },
    keys: ["title"],
  }, resultsList: {
    tag: "ul",
    id: "autoComplete_list",
    class: "results_list",
    destination: "#autoComplete",
    position: "afterend",
    maxResults: 5,
    noResults: true,
    element: (list, data) => {

      if (data.results.length) {
        console.log("asd");
      } else {
        // Create "No Results" message element
        const message = document.createElement("div");
        // Add class to the created element
        message.setAttribute("class", "no_result");
        // Add message text content
        message.innerHTML = `<span>Found No Results for "${data.query}"</span>`;
        // Append message element to the results list
        list.prepend(message);
      }
    },
  },
  resultItem: {
    element: (item, data) => {
      // Modify Results Item Style
      item.style = "display: flex; justify-content: space-between;";
      // Modify Results Item Content
      item.innerHTML = `
            <div class="flex gap-2">
                <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded border">
                    <img
                        src="/storage/img/product/50/${data.value.featured_image.name}.jpg"
                        class="h-full w-full object-contain"
                    />
                </div>
                <div class="whitespace-normal line-clamp-1">
                    ${data.value.title}
                </div>
            </div>`;

    },
    highlight: true,
  },
  events: {
    input: {
      focus: (event) => {
        console.log("Input Field in focus!");
        if (autoCompleteJS.input.value.length)
          autoCompleteJS.start();
      },
      selection: (event) => {
        const selection = event.detail.selection.value;
        autoCompleteJS.input.value = selection;
      },
    },
  },
});

[someson]

https://github.com/TarekRaafat/autoComplete.js/issues/362#issuecomment-1625781009