Preventing duplicate suggestions

[MikeAlhayek]

Is your feature request related to a problem? Please describe.
When searching using multiple keys, when the same record is found using multiple keys, the same instance is suggested multiple times

Thoroughly Describe the solution you'd like
If the user is search using multiple keys, we should only show the same instance one time. Here are some suggestion on how this could be done

1. Eliminating the need to use keys when fetching the data using external source "since the search would be done on the server side".
2. Adding a new property called idKey "or something else" to set the name of the property that should identify the object uniqueness. In other words, the id property so the same record is only presented once.
3. A better way to suggest the same record ones?

Please provide a few use cases for this feature
Let's consider the following setup

document.addEventListener('DOMContentLoaded', () => {

    var selector = document.querySelector('.customer-autocomoplete');
    selector.addEventListener("selection", function (event) {
        console.log(event.detail);
    });

    new autoComplete({
        selector: () => {
            return selector;
        },
        placeHolder: selector.getAttribute('data-placeholder') || '',
        data: {
            src: [{
                fullName: "Mike Alhayek",
                email: "mike@gmail.com",
                idNumber: "mike",
                phoneNumber: "3031234567",
                driverLicenseNumber: "dl303123",
               id: 100
            }],
            cache: false,
            keys: ['fullName', 'phoneNumber', 'driverLicenseNumber','idNumber', 'email']
        },
        debounce: 300,
        query: (input) => {
            return input.trim();
        },
        trigger: (query) => {
            let length = query.length;
            if (!isNaN(query)) {
                // the input is likely a phone number, only search when the phone number is between 7 - 11 characters long
                return length >= 7 && length <= 11;
            }

            // trigger when the term is >=3 characters long
            return query && length >= 3;
        },
        resultItem: {
            tag: "li",
            class: "autoComplete_result",
            element: (item, data) => {

                var div = document.createElement('div');
                div.classList.add('text-muted', 'row','row-cols-2');

                if (data.value.phoneNumber) {
                    div.innerHTML += '<p class="mb-1"><i class="fas fa-phone"></i> ' + data.value.phoneNumber + '</p>';
                }

                if (data.value.driverLicenseNumber) {
                    div.innerHTML += '<p class="mb-1"><i class="fas fa-id-badge"></i> ' + data.value.driverLicenseNumber + '</p>';
                }

                if (data.value.idNumber) {
                    div.innerHTML += '<p class="mb-1"><i class="far fa-id-card"></i> ' + data.value.idNumber + '</p>';
                }

                if (data.value.email) {
                    div.innerHTML += '<p class="mb-1"><i class="fas fa-envelope-square"></i> ' + data.value.email + '</p>';
                }
                
                if (data.value.homeAddress) {
                    div.innerHTML += '<p class="mb-1"><i class="fas fa-address-card"></i> ' + data.value.homeAddress + '</p>';
                }
                item.innerHTML = '<strong>' + data.value.fullName + '</strong>';
                item.append(div);
            },
            highlight: "autoComplete_highlight",
            selected: "autoComplete_selected"
        },
    });
});

If you search for the word mike you'll see get 3 suggested for the same record just because the work mike appears in the fullName, email and idNumber.

Please Describe alternatives you've considered
I have not been able to find a workaround for this yet. I hope a solution is already implemented so I don't have to wait for a new feature :)

[folknor]

I believe this is a duplicate of #102