I have a Sveltekit Project with Bootstrap (Sveltestrap) and I want to implement a search function for it.
I want to have an input field that allows the user to type in the wanted value and then like a multiselect be able to select multiple values (e.g. orange cat, black cat, red cat, ...). The problem is I have lots of data (like 30.000 entries) to check against the user entry so he cant enter something that doesnt exist in the data.
Something I found is this (https://github.com/janosh/svelte-multiselect) but the problem with this is that it is very hard to style it so it doesnt fit the page.
While writing this question I realized that something I am looking for is kinda the search bar that StackOverflow uses for the tags when writing a new question.
Does anybody have an idea or a direction I could look into to solve this problem?
This can get complex to implement yourself. The size of the data calls for optimizations that you wouldn't otherwise need. First thing you'll want to look into is debouncing the search input.
Here is a simple example of it for reference.
Depending on how exactly you want to implement it, you may also have to look into virtualization. In a component similar to the example above, this would mean that the filtered data gets sliced dynamically as you scroll through it. Hence only the chunk that is visible from your scroll position actually gets rendered.