Result picked twice with multiple keys defined

[ludovi-com]

Hi, I'm trying to query a php script that returns an array with multiple keys (name, surname, id etc...) and my search bar could be set to query by different criterions. I couldn't find a way to reset the autocomplete object every time the search criteria is changed so I worked around making the script return only the results I need and selecting all the possible keys at the same time. But now I found that if a result have the same value in different fields is picked twice...

Is there a way to solve this issue?

Here is my data field config:

data: {
    src: async () => {
        const source = await fetch("modules/search.php?query=" + $('#search').val() + "&crit=" + currentCrit);
        const data = await source.json();
        return data;
    },
    key: [critMode.name, critMode.surname, critMode.id]
    // currentCrit is a variable who could assume values from the object critMode
}

Some results sample who get picked twice:

[{"name": "Alice", "surname": "Alice", "id": "1"}, {"name": "Bob", "surname": "Bob", "id": "2"}]

Thanks

[TarekRaafat]

Hello @ludovi-com,

I'm not getting the first part clearly reset the autocomplete object every time the search criteria is changed I would appreciate it if you could explain more on this point maybe I could help you with it.

Regarding, getting duplicated results is normal when you use data.key so to handle duplicates you need to use the filter snippet below.

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

{
    data: {
        src: ... ,
        key: [name, surname, id],
        results: (list) => {
            // Filter duplicates
            // incase of multiple data keys usage
            const filteredResults = Array.from(new Set(list.map((value) => value.match))).map((id) => {
                return list.find((value) => value.match === id);
            });
        
            return filteredResults;
        },
    }
}

[ludovi-com]

About resetting the autocomplete object every time the search criteria is changed :
My first issue was to change the search mode, like searching by name, surname or id but always by one at a time. I wasn't able to find anything about changing the key parameter on a running instance and I wouldn't like to build a new instance for every time the user changes mode.
So I fallback to setting all the available keys and making the php script return only the results matching the current mode.

---

Thanks a lot as you suggested with the results parameter I was able to filter everything flawlessly!

[TarekRaafat]

You can already change the search mode like in the demo by changing the desired value onClick event for example as shown below from the demo.

// Toggle Search Engine Type/Mode
document.querySelector(".toggler").addEventListener("click", function () {
  // Holds the toggle button alignment value
  const toggle = document.querySelector(".toggle").style.justifyContent;

  if (toggle === "flex-start" || toggle === "") {
    // Set Search Engine mode to Loose
    autoCompleteJS.searchEngine = "loose";
  } else {
    // Set Search Engine mode to Strict
    autoCompleteJS.searchEngine = "strict";
  }
});