The right arrow is always displayed, even when no data is available. This might be confusing for end-users.

I suggest hiding the arrow when no data is available, or at least grey it does not call for a user action.

What do you think?

Hello,

is there a way to accept unlisted items ? I mean if the autocomplete component used the list ['one','two','three'] is it possible to make accept value 'four' ?

thanks,

If I search, and then backspace to the point I remove the last character, then the dropdown list still remains with the last list visible.

My current workaround is to set minCharactersToSearch=2, as this functions as expected.

It looks to be related to line 590 of SimpleAutocomplete.svelte:

  function isMinCharsToSearchReached() {
    return (
      minCharactersToSearch > 1 && filteredTextLength < minCharactersToSearch
    );
  }

  function closeIfMinCharsToSearchReached() {
    if (isMinCharsToSearchReached()) {
      close();
    }
  }

if minCharactersToSearch is 1, then it'll never close.

Why is this logic explicitly excluding the default use case (minCharactersToSearch is 1)?
If this is intentional functionality then I'd ask for an option to closeOnEmpty.

I'm using the autocomplete async if that is relevant.

Thanks for the really useful library :)

I suggest to add an option that unselects the selectedItem when backspace is hit.

Because className defaults to undefined, the literal string undefined appears in the markup, i.e.

<div class="undefined autocomplete select is-fullwidth sautocomplete-763 svelte-gfsz5d">

Possible fixes:

• default className to ''
• output an empty string if className is falsy <div class="{className || ''} autocomplete select is-fullwidth {uniqueId}">

https://svelte.dev/repl/f88cf2ad315a419ea4e737e18b612a9e?version=3.23.2

I have an array of options.
I see the valueFieldName option to say which key to use as the value.

But when I bind to it with bind:value, it's not two-way -- when I change it elsewhere, it doesn't update locally. Also, when I initialize with a value, it seems to get overwritten.

Using bind:selectedItem works, but then I'm passing unnecessary nested data back and forth. I'm guessing that when I change a label name, the key won't match anymore either.

Expected result: when using valueFieldName, if the options are objects but the value is a string, it should find the option by the valueFieldName.

EDIT: to be clearer: when setting the value in the third box to one of the keys, I expect the autocomplete box to change.

The demo shows these down arrows:

They aren't available in the module — you need to manually add additional CSS.

When the user clicks away from the input box then it closes. When it reopens the current search is still available, based on what is still in the input.

However, when they do this, the bold effect on matched words is lost.

This is due to the line:

filteredListItems = listItems; in resetListToAllItemsAndOpen()

If this line is commented, then it behaves as I would expect (text is in input box and matches are highlighted in the dropdown).

I imagine for a static list you may want to reset this if the list is empty, so suggest this is simply wrapped:

    if (text === "") {
      filteredListItems = listItems;
    }

Is there a way to add debounce of lets say 250ms before it goes and hit the API?

When i type a non listed text, and i press enter i get this:

SimpleAutocomplete.svelte:310 Uncaught TypeError: Cannot read property 'item' of undefined
    at selectListItem (SimpleAutocomplete.svelte:310)
    at selectItem (SimpleAutocomplete.svelte:321)
    at HTMLInputElement.onKeyPress (SimpleAutocomplete.svelte:430)
selectListItem @ SimpleAutocomplete.svelte:308
selectItem @ SimpleAutocomplete.svelte:320
onKeyPress @ SimpleAutocomplete.svelte:429

so you have to ignore non listed items from event!

I suggest adding an option to lock the input. This would be useful when one wants to prevent users to submit entries that are not taken from the suggestion list. Here is the scenario:

• the user types thing in the input field
• the suggestions list opens, the user selects an option
• now the user cannot edit the input field, but a small cross has appear on the right of the field
• the user clicks on the cross, or presses backspace
• the field value is reset, the user can edit the input field again

What do you think?

hello @pstanoev
thanks for component.

Is it possible to support custom theming with css vars?

I would love to use this with async, any plans to add that?

Is there a way to allow users to type an entry that is not in the list? (not sure of the technical name for this behavior). The user could select one of the autocomplete entries, or type a new one?

How do I react to the component's focus event?

The value variable is computed alongside the text variable when an item is selected.

However, value is never read anywhere else in the code, nor bound to anything. I would have expected value to be bound to the input value attribute, but this is actually text that is:

When submitting the form, the input indeed holds the text value. This seems like a bug to me.
What do you think?

Once you select an item, there is no way to unselect it. It would be handy to include a way to clear the selection (perhaps an "X").

In this scenario, async calls are made to a server api which searches in cache. If no results are returned, does this component allow a submit event to the server via user pressing enter key or some button?

The JSON Lines format describe a dataformat where each line is a valid JSON object. This format is very convenient to use with streamed HTTP responses where lines can be received a few at a time.

I suggest making simple-svelte-autocomplete able to handle streamed async responses. I think for await ... of is a good way for doing this.

i tried adding className=form-floating but its not working?

Hi,

The browser's inbuilt autocomplete functionality is interfering with the simple-svelte-autocomplete list of matches. There is a simple fix. Add the attribute autocomplete="off" to the <input> element at around line 614. See MDN for more details.

BTW, this is a great component, very easy to use.

I can't seem to dispatch events from the Autocomplete component to a Parent component in Svelte. The binding works perfectly, however, I need to be able to use a function which does not seem to work.

function change(event){
ticker = "change"
data = event.target.value
}

{#if ticker === "overview"}
<AutoComplete bind:selectedValue on:change={change} />
{#if ticker === "change"}

For instance, if there is an item téléphone in the list and the user types tele the item won't be suggested.
Latin languages use a lot of accents, and they are a recurrent source of typos, so that would be great if the component could manage those cases.

When searchFunction requests take a long time, there is no visual indicator showing that the request is sent. I suggest implement a spinner in those cases.

Some inspiration here

Below is my code.
<AutoComplete items={countries} bind:selectedItem={selectedCountry} labelFunction={c => '<a href="' + c.url + '"><span class="flag-icon ' + c.flag + '"> </span>' + c.name + '</a>'} keywordsFunction={c => c.name} />
When I type the letter "a" it seems to be searching all the HTML inside .autocomplete-list-item where I expect it to use the keywordsFunction to search for the keyword.
Is this an issue or I'm doing something wrong?

I suggest passing maxItemsToShowInList to the searchFunction.

This way the number of elements can be sent serverside, and would allow a server to only set the right number of elements in the response, and then save some bandwidth.

What do you think?

I have recent try to add a placeholder and didnt work :S

When a selected item is takes up more space than is available it looks wierd.

When an async autocomplete has been initialized with selectedItem, if the user clicks on the field and the autocompletion menu does not open.

Instead, it should open and make a request with the input.

The onChange function set up in the Autocomplete component gets triggered twice before I even do anything. How to stop that? It should only trigger once the Autocomplete input box has lost focus.

Very useful component! Thank you.
Would you consider adding a license for this code (e.g., MIT)?

Thanks for the great component. It would be great if it exported a .focus method that focused on the input. The workaround is to use itemId and getElementById... but... would be handy. (thanks for fixing the itemId extra space, I ran into an issue with that and noticed that it was fixed with an npm update).

Expectation: The list of options is in the foreground, like a normal select box.
Seems to be working fine in the demo: http://simple-svelte-autocomplete.surge.sh/

But a simple repl shows it shifts all the elements below it: https://svelte.dev/repl/dd32e65146e543e6b3c2317f002c99f4?version=3.24.0

Ideas?
(I don't see any CSS in the repl compiled code, but I do in my dev version -- I guess that's only the local css, not the component css.)

Is there a way I can get the value entered by the user and not found?

Thank you.

@pstanoev per chance would you have some time to publish a release some day? Thank you!

It would be nice to have this package published in NPM registry.

If someone types a query very fast, say lorem ipsum dolor, a lot of network request will be generated (l, lo, lor, lore, lorem, lorem , lorem i ...). This causes several issues:

• the only useful query is lorem ipsum dolor
• ajax response may not come in the order they were sent, this leads to suggesting old queries while ignoring the current one. For instance the response for the lor query might come after lorem ipsum dolor, so the completion will be proposed for lor instead of lorem ipsum dolor.
• search queries might be slow on a server, sticking to the minimum useful queries might be a good idea

I can see several leads to fix this:

• Only send a request after there has been some inactivity on the field (i.e. wait a few milliseconds). That would probably go unnoticed by the end-user, but that may reduce the number of queries.
• Add a marker on each request, and expect the answer to have the same marker. This way the client side can know which request has been sent the last, and it can ignore old request coming too late. We can insipire on the draw attribute on Datatables serverside processing mechanism. I suggest passing a draw parameter to the searchFunction that would be an increasing integer, and expect this same draw parameter to be returned by searchFunction. The search method would keep track of the highest draw values returned from searchFunction calls and would ignore all calls with a draw value below this.

What do you think?

This component allows to select a single value from a list of suggestions. There are usecases where several values need to be collected.

I suggest making this component able to deal with several values:

• either by enabling a multiple option (my favorite),
• or by implementing another MultipleSvelteAutocomplete component (and factorize the common code of the two components)

The result could integrate well with bulma tags, and look like this:

The list of values can be stored:

• use <select multiple> instead of <input> in those cases
• either in the <input> value parameter, with a configurable separator (e.g. , or ; or )
• either in several <input type="hidden" name={name}>

What do you think?

I am using this plugin to filter products and categories.
For the label I use the categories.

In the select dropdow there are as many categories as there are products. So there are plenty duplicate categories shown.

is it possible to reduce the dropdown categories?
labelFunction={item => item.category}
maybe like
labelFunction={new Set(item => item.category)}

Hey, first off thanks a lot for resurrecting the old svelte 2.x autocomplete and bringing it into the svelte 3.x world. I usually have pretty good google-fu, but I almost gave up in finding a good, but simple and easy to use autocomplete solution for a svelte 3.x app I'm developing, would have even been happy to use some non-bloated non-svelte version.

Anyway, I have a few suggestions for improvements to this library (and some minor issues, too) that I'd like to share, and hopefully someone (maybe even myself) will pick them up and do something productive with them!

• when I've already selected an item and click the autocomplete again, I may want to type something new now and would expect the autocomplete to select the text in there for me, so I can overwrite it without having to delete it first --> auto-select text contents when focused
• I don't necessarily want to keep displaying the text that has been entered or selected in the autocomplete field; sometimes I'd prefer to just show it as empty (ideally with an icon in there that signals "search/filter"), sometimes I'd want to just keep the text the user entered instead of changing the text to what ended up being selected
• when the autocomplete field is focused, I'd expect pressing ESC to clear its text contents (or revert to the previous selection / text if there was one and I started making changes, but then decided to abort midway through before making a new selection; but this part is already beyond what I really need / imagine at the moment)
• maybe the field could also provide an "X" icon on the right, to allow less keyboard-hotkey-savvy users to also easily clear the selection
• blue arrow overlapping text if text is long, making it non-recognizable and not user friendly when that happens

To provide a small bit of context about the use case here, in the current instance I'm using the component to control a multi-level (tree-style) navigation bar that allows direct jumping (to leaf nodes) instead of navigating via multiple clicks. So it's less of a form-field type usage and more of a persistent and repeatedly re-used search/filter/navigation element where "current state" is a lot less important (after selection) than the re-occurring event of typing/filtering and selection itself.

I'll leave this post as is for now, might get back to it later. I feel like some thinking about if any of this doesn't fit in with the simple "vision" for this component could be good, as well as considering how these might be implemented while keeping or even simplifying the API further. But brain doesn't want to do that right now, brain seems tired. :D

Cheers
Denis

Let suppose I have a list of several items matching common keywords: ["White Rabbit", "White Horse", "Black Rabbit", "Black Horse"]

• If input is White, then White Rabbit and White Horse are suggested. This far the behavior is as expected.
• If input is White Rabbit, then only White Rabbit is suggested. This shows that the current behavior is that all the typed words must be found in the items keywords to appear in the suggestion list. This behavior can be useful, but sometimes one might want to suggest more loose results. For instance we could expect that typing White Rabbit would suggest White Rabbit, White Horse and Black Rabbit. That would imply to list every item matching at least one input word, and order them depending on the number of matched keywords.
• If input is Rabbit White, then nothing is suggested. This is unexpected as all the input keywords are present in White Rabbit.
• If input is White Cat then nothing is suggested. Here I would have expected White Rabbit and White Horse

I suggest:

• adding a parameter matchAllKeywords that would be True by default (the current behavior). When False an item would appear in the list if it contains at least on keywords.
• order the items in the list, starting with the items that contains the more keywords.
• ignore the order for the keywords suggestion (so white rabbit and rabbit white are the same)

What do you think?

Using this library with SvelteKit causes vite to fail to compile if debug=true is used.

performance is not defined
ReferenceError: performance is not defined
    at prepareListItems (SimpleAutocomplete.svelte:185:12)
    at SimpleAutocomplete.svelte:233:28

Obviously performance is only available in the browser.
Wrapping these calls in if (process.browser) { ... } allows it to compile, but that's a hack.

perf_hooks provides the performance API, but is an external / node specific dependency.

At the moment, the list items are statically defined, and let no room for customization.

Those are thing I miss:

• I would love to be able to change the items style;
• I would also love to be able to add context to the list item with some variables from the objects list. For instance with the colors example in the README.md file, this would allow to display the color names colorized with their actual color codes. This would be particularly useful to add context in cases when several elements in the list have the same label, but could be differentiated by a bit of context otherwise;
• I would like to be able to do a little more complex HTML here.

I can give a try and submit a patch. I suppose than slots can be useful here.

What do you think?

Hello, thank you for component! It's almost perfect!

I would like to request a feature that allows me to add Label with property 'for' attached to autocomplete's input for screenreaders.

Let me know how can I contribute

When browser stores in history values entered to search input it starts to propose it's own autocomplete dropdown which hides component list.
This thread suggests adding autocomplete="off" as solution: https://stackoverflow.com/questions/2186290/disable-autocomplete-via-css

It would be really useful.

First of all thanks for your work! Was easy to setup and implement!

I have the following problem: If I have two Autocomplete elements on one page and the user clicks from one open to the next - both stay open. Only a click outside of the Autocomplete triggers a close it seems, not a click to another one.

Is there any way to close an Autocomplete programmatically? Or perhaps my use case would be better solved if a click into another Autocomplete would trigger a close itself.

Hi. Sometimes the native browser autocomplete menu is displayed at the same time as this module. I suggest adding a autocomplete parameter that would trigger the HTML5 autocomplete parameter. I would also suggest this being false by default.

What do you think?

When using the Autocomplete Component with a searchFunction this warning message appears in the browser console:
SimpleAutocomplete.svelte:165 Autocomplete items / search function did not return array but undefined

It appears even if the searchFunction never returns undefined and is also happening on the demo page http://simple-svelte-autocomplete.surge.sh/

There was a missing piece to #58

The Red item string is not surrounded with <b></b> as is it when no accent is typed.

When labelFunction is defined, search fails unless keywordsFieldName is also present. You see "No results found":

Enabling debug shows:

Extracted keywords: '[object object]' from item: {"url":"http://127.0.0.1:8000/api/organizations/198/?
format=json","id":198,"name":"East Palo Alto","notes":""}

works (labelFunction + keyworksFieldName):

<AutoComplete searchFunction={getAgencyList} labelFunction={getAgencyLabel} keywordsFieldName="name" 
valueFieldName="id"

works (labelFieldName, no keyworldsFieldName):

<AutoComplete searchFunction={getAgencyList} labelFieldName="name" valueFieldName="id"

fails (labelFunction, no keyworldsFieldName):

<AutoComplete searchFunction={getAgencyList} labelFunction={getAgencyLabel} valueFieldName="id"