Getting only words starting with certain characters

[MarcoTroost]

Hi Tarek,

Thank you for your great work on autocomplete.js!

I would prefer to show only words that start with a certain characters instead of words containing those characters.

If one would type "wa" for instance, the returned set should be "water, warning, warpspeed" instead of "awakening, tupperware, awake".

Do you have such a feature on your roadmap? Or perhaps could you tell me how such an effect could be achieved?

kind regards, Marco

p.s. I would like to use autocomplete.js as an alternative to the (deprecated) typeahead library that i'm using (example: www.droominfo.nl).

[TarekRaafat]

Hello @MarcoTroost,

Much appreciated! :)

You could achieve the result you're after easily with the current version of autoComplete.js

All you need is just to use the data.results method for filtering values that start with the required value "wa" or even the user's query.

Please try it and let me know how it goes.

Cheers! :)

[MarcoTroost]

Hi Tarek,

Thanks for the feedback.

Perhaps i'm looking wrong, but i can't find a 'results' method. Either way, i have no idea how to filter the data returned.

Would u be so kind as to provide a code-example?

kind regards, Marco

----- UPDATE ----

The api-documententation on your personal homepage doesn't reflect the latest adjustments on autocomplete, as seen on https://github.com/TarekRaafat/autoComplete.js/blob/master/dist/js/index.js

This is what i've done to make it work:

results: (list) => {
            const results = list.filter( ( obj ) => {
                return obj.value.startsWith(document.querySelector("#search").value);
            });
            return results;
        },

[kasperkamperman]

I have the same question actually.

I think the solution of @MarcoTroost (thanks for that) doesn't work in case of diacritics, uppercase/lowercase mixes. Since the "original" input value is used.

When I use diacritics: true, the query matches on énsch and ensch. Which is what I like. Of course I can program the functionality, but having this build in the autocomplete api might be more neat probably.

@TarekRaafat Maybe even a "stricter" mode in the searchEngine configuration might work for this? Do I need to make a new issue on this?

[kasperkamperman]

I use the feedback function, so I check for data.matches.

My take:

var list = data.matches;

var query = document.getElementById("autocomplete").value;
query = query.toLowerCase()
         .normalize("NFD")
         .replace(/[\u0300-\u036f]/g, "")
         .normalize("NFC");

list = list.filter( (obj) => {
    let match = obj.match;
    match = match.toLowerCase()
         .normalize("NFD")
         .replace(/[\u0300-\u036f]/g, "")
         .normalize("NFC");

    if(match.startsWith(query)) return obj;
});

console.log(list);