autocomplete search function

[northkode]

Would be nice to be able to define the function the auto complete uses to find a matching value, not all payloads are just strings, being able to pass tags as objects with a title etc and having autocomplete just work would make a bit more sense with how most applications are built from an API perspective.

If I can find some time, i might make a PR

[agustinl]

Hi @northkode ! Thanks for your recommendation.
Please feel free to create a PR, and if this ok I will merge it to production branch!,

Like you, if in this days I can find some time, I will start to work on this 🚀

[shivshankardayal]

autoComplete must not be an array but rather a function because any application will fetch it from backend. As of now it is just an input field without autocomplete which is highly desirable.

[agustinl]

Hi @northkode @shivshankardayal

What do you think its the best way to pass a function to a component? I understand 100% yours point on this feature.

[shivshankardayal]

I changed Tags.svelte with following:

const ac = await autoComplete();
var matchs = ac.filter(e => e.toLowerCase().includes(value.toLowerCase())).map(matchTag => {

Sensible APIs would be async in nature so my function is as well. Thus I made getMatchElements async so that I can await on search function. 2 lines that is it and it is working for me.

If you want to further improve this you should accept an array of dicts which will also contain tag ids. The reason being tags will be stored in some sort of db with an id. So updating counts etc would be easier. You should look at the jquery token input plugin for example.

Way back in 2013 when I made a minimal SO clone I used that jquery library. https://loopj.com/jquery-tokeninput/demo.html is the home page.

[agustinl]

Hi man, thanks for your reply.

Sorry but I dont understand some things,

I think that the idea is, for eg.
Type a github username on the input field, get this value, fetch the github api and get the results to show on auto complete list on svelte tags. Im ok?

My question is, how you get the value on the input to fetch the api and wait the results ? Do you have a working example to take a look?

[Yahatix]

I've created a little repl and adjusted the Tags.svelte so that autoComplete accepts a function and fixed values https://svelte.dev/repl/92e971744653464d85ed45550576072b?version=3.32.1

[agustinl]

Thanks a lot @Yahatix

I added a prop to define a key to search if the results of the function is an array of objects.

I will merge the branch tomorrow after some tests.

cc @shivshankardayal @northkode