metonym / svelte-typeahead

Accessible, fuzzy search typeahead component

svelte-typeahead

Accessible, fuzzy search typeahead component.

This component uses the lightweight fuzzy library for client-side, fuzzy search and follows WAI-ARIA guidelines.

Try it in the Svelte REPL.

---

Installation

# Yarn
yarn add -D svelte-typeahead

# npm
npm i -D svelte-typeahead

# pnpm
pnpm i -D svelte-typeahead

Usage

Basic

Pass an array of objects to the data prop. Use the extract prop to specify the value to search on.

<script>
  import Typeahead from "svelte-typeahead";

  const data = [
    { state: "California" },
    { state: "North Carolina" },
    { state: "North Dakota" },
    { state: "South Carolina" },
    { state: "South Dakota" },
    { state: "Michigan" },
    { state: "Tennessee" },
    { state: "Nevada" },
    { state: "New Hampshire" },
    { state: "New Jersey" },
  ];

  const extract = (item) => item.state;
</script>

<Typeahead {data} {extract} />

Custom label

$$restProps are forwarded to svelte-search.

Use the label prop to specify a custom label.

<Typeahead label="U.S. States" {data} {extract} />

Hidden label

Set hideLabel to true to visually hide the label.

It's recommended that you set the label – even if hidden – for accessibility.

<Typeahead label="U.S. States" hideLabel {data} {extract} />

Custom-styled results

This component uses the fuzzy library to highlight matching characters with the mark element.

Use the default slot to render custom results.

<Typeahead {data} {extract} let:result let:index>
  <strong>{@html result.string}</strong>
  {index}
</Typeahead>

No results

Use the "no-results" slot to render a message if the search value does not yield results.

<Typeahead value="abcd" {data} {extract} let:value>
  <svelte:fragment slot="no-results">
    No results found for "{value}"
  </svelte:fragment>
</Typeahead>

Limit the number of results

Use the limit prop to specify the maximum number of results to display. The default is Infinity.

<Typeahead limit={2} {data} {extract} />

Disabled items

Disable items using the disable filter. Disabled items are not selectable or navigable by keyboard.

In the following example, items with a state value containing "Carolina" are disabled.

<Typeahead
  {data}
  value="ca"
  extract={(item) => item.state}
  disable={(item) => /Carolina/.test(item.state)}
/>

Focus after select

Set focusAfterSelect to true to re-focus the search input after selecting a result.

<Typeahead focusAfterSelect {data} {extract} />

Show dropdown on focus

By default, the dropdown will be shown if the value has results.

Set showDropdownOnFocus to true to only show the dropdown when the search input is focused.

<Typeahead value="ca" showDropdownOnFocus {data} {extract} />

Show all results on focus

By default, no results are shown if an empty input (i.e., value="") is focused.

Set showAllResultsOnFocus to true for all results to be shown when an empty input is focused.

<Typeahead showAllResultsOnFocus {data} {extract} />

Styling

Note: this component is minimally styled by design. You can target the component using the [data-svelte-typeahead] selector.

:global([data-svelte-typeahead]) {
  margin: 1rem;
}

API

Props

Name	Type	Default value	Description
value	string	""	Input search value.
data	TItem[]	[]	Items to search.
extract	(TItem) => any	(item) => item	Target the value if TItem is an object.
disable	(TItem) => boolean	(item) => false	Disabled items are shown in results but are not selectable.
filter	(TItem) => boolean	(item) => false	Filtered out items will not be displayed in the results.
autoselect	boolean	true	Whether to automatically select the first result.
inputAfterSelect	"update" | "clear" | "keep"	"update"	Set to "clear" to clear the value after selecting a result. Set to "keep" to keep the search field unchanged after a selection.
results	FuzzyResult[]	[]	Raw fuzzy results from the fuzzy module
focusAfterSelect	boolean	false	Set to true to re-focus the input after selecting a result.
showDropdownOnFocus	boolean	false	Set to true to only show results when the input is focused.
showAllResultsOnFocus	boolean	false	Set to true for all results to be shown when an empty input is focused.
limit	number	Infinity	Specify the maximum number of results to display.
...$$restProps	(forwarded to svelte-search)	N/A	All other props are forwarded to the input element.

Dispatched events

• on:select: dispatched when selecting a result
• on:clear: dispatched when clearing the input field

<script>
  import Typeahead from "svelte-typeahead";

  let e = [];
</script>

<Typeahead
  {data}
  {extract}
  on:select={({ detail }) => (e = [...e, { event: "select", detail }])}
  on:clear={() => (e = [...e, { event: "clear" }])}
/>

<pre>{JSON.stringify(e, null, 2)}</pre>

Forwarded events

The following events are forwarded to the svelte-search component.

• on:type
• on:input
• on:change
• on:focus
• on:clear
• on:blur
• on:keydown

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

Changelog

License

MIT

svelte-typeahead's Issues

Allow setting initial / default value

The plugin works great when creating objects.
Where I'm struggling is with Edit / Update scenarios.

It would be great to be able to supply an initial value.
Assigning this via value requires maintaining a value var which will get cumbersome esp. of there are multiple typeaheads on one screen.

Wdyt?

Should we communicate no results?

I think we should somehow communicate to the user that we have not found any results for their search.

Now the list disappears and neither happens nor is any message displayed.

What do you think?

svelte-typeahead REPL does not run

Link in README gives this error:

What do you think about disabling fuzzy when items are already filtered on backend?

What do you think about disabling fuzzy when items are already filtered on backend?

Custom search icon

It would be nice to:

• have a default search icon so the component better resembles a search input
• customize the icon

... and also have a custom icon for the "Clear" functionality instead of using the native browser default

Debounce is not working...

REPL: https://svelte.dev/repl/6123712226fa458c87064d891b91cbbd?version=3.42.1

If you see the console you'll notice the value is changed immediately, not after 2000 ms.

Am I wrong?

Z-index fix?

I currently have multiples of this component instanced and... just look at this:

the ones below are also instances of svelte-type-ahead, the results of the focused instance are rendered under the instances below them, any work around for this?

[Doc] How to use in sveltekit

Hi,
I had difficulty to get it to work with the Sveltekit, after some research found a solution.
if it's acceptable please include it in the docs, so other people can use it.

<script>
  import data from "./states.js";
  import { onMount } from 'svelte';

  let Typeahead;

  onMount(async () => {
    const module = await import("svelte-typeahead");
    Typeahead = module.default || module;
  });
	
  let events = [];
</script>

{#if Typeahead}
<svelte:component this={Typeahead} 
  label="U.S. States"
  placeholder={`Search U.S. states (e.g. "California")`}
  {data}
  extract={(item) => item.state}
  disable={(item) => /Carolina/.test(item.state)}
  on:select={({ detail }) => events = [...events, detail]}
  on:clear={() => events = [...events, "clear"]}
/>
{/if}
<pre>{JSON.stringify(events, null, 2)}</pre>

<style>:global(input) { margin: 0; }</style>

Documentation audit

• simplify SvelteKit config example
• separate filter example
• id in data is not required

The demo is offline

The demo is offline: https://metonym.github.io/svelte-typeahead/

[QUESTION] Show first entries on input click

Thank you for creating typeahead! It's really cool!

I would like to show the first entries when clicking the input, (like a select would do). It can be useful to avoid typing when the list is initially small.
I tought it was showDropdownOnFocus but it doesn't show up when input is empty :O

Is there a way to disable the input?

Is there a way to disable the input?

Like the classic disabled prop on classic <input type="text disabled />.

Focus after select not focusing

When I do focusAfterSelect='true' the search results stay open after an selection, but the input doesn't get focus. I have to select it with the mouse to change the text in it.
The console error says TypeError: searchRef.focus is not a function.

I wasnt able to get the input focused, but the error message can be removed by changing

    if (focusAfterSelect) searchRef.focus();

    hideDropdown = true;

to

        if (!focusAfterSelect)   hideDropdown = true;

[Q] How to pre-select a value without the dropdown showing?

Hi all,

is it possible to pre-select a value on mount without the dropdown showing?

I'm binding a value variable to the component which I set to an item from the data array on mount. The value shows up in the search box (good!), but unfortunately the dropdown is open as well, showing exactly one result (not so good!):

Is there any way to prevent this from happening?

// rough code:
let value = 'UNITED STATES';
...
<Typeahead autoselect data={countries} {extract} bind:value />

Disabled items should not be keyboard selectable/navigable

How to set initial value?

If I want to pass in a key and have that be the selected one from my data as an initial value, then upon edit I just erase it, is it possible with this component?

add support for an external label

Add a prop: external-label={id} that will use the id external-labal for aria and input for

willing to implement this.

Say "No results found" and let us set an icon in the Search bar.

Hi, could you please have a feature where it says, "No results found" when results ul is empty for UX? Or even let us customize the message for that for the component?

Also have like a search icon or let us have a custom icon at the left or maybe right side of the search box? Thank you very much. I'm using this package because it's cool and it's very close to React Semantic Ui's search box.

Same IDs

The outer div, the form and the input are all sharing the same id. Is this by intention?

svelte-typeahead/src/Typeahead.svelte

Line 104 in 9c2eb8e

{id}

svelte-typeahead/src/Typeahead.svelte

Line 113 in 9c2eb8e

{id}

I was also wondering about the double writing of on:focus and on:clear:

svelte-typeahead/src/Typeahead.svelte

Line 118 in 9c2eb8e

on:focus

svelte-typeahead/src/Typeahead.svelte

Line 122 in 9c2eb8e

on:clear

But I feel like this is by intention and I just didn't get the concept behind it, so maybe this issue can just be closed.

[question] Is it possible to have typeahead with no css at all? Headless typeahead?

I wasn't able to customize typeahead to remove its background and change the look and feel of the results.

https://svelte.dev/repl/e83817000b5b4aa7bd3a3f83b20256c8?version=3.49.0

I even tried to create a "surrogate" input to input the values, but wasn't able to get the list of results.

Provide preset themes

Repl example is missing a few states.

Fixed in this fork of the repl: https://svelte.dev/repl/0e13c35e1d0145fc9e8c431f58aa22fe?version=3.53.1

Limit the number of matching items?

Is there any way to limit the number of returned matches, to 10 for example?

Provide unstyled component

Get other property or index on select

Is there any way to search in one property, but get another on select?

e.g. in this repl: https://svelte.dev/repl/3d17231bcce24ac681921968ea0d5d38?version=3.24.1
Is there a way to search in state, but to access the value of abbr on select?

Having the index would also work, then one could do states[index].abbr. But since the index is only the index of the result and not the searched array position this doesnt work.

Resolve `svelte-ignore a11y-role-has-required-aria-props`

Follow up to #71

The svelte-ignore a11y-role-has-required-aria-props warning emitted by [email protected] is temporarily ignored in #71 but should be addressed.

[Feature request] Pass an Array into extract

I think about having a title and a subtilte, which should both be searched but have different formatting.

of course I can do const extract = (item) => ' <h3>' + item.title+ '</h3><p>'+item.subtitle+'</p>':

But searching for h3 would find (and crash) the html:

So I thought about passing an array into extract and geting an array in result.string back:

const extract = (item) => [ item.title, item.subtitle ];

 <Typeahead {data} {extract}>
        <div>
           <h3> {result.string[0]}</h3>
           <h3> {result.string[1]}</h3>
        </div>
    </Typeahead>

What do you think about that Idea?
To not break things it would be nice to have the ability to pass in an array or a string.

I think this would also need some changes in fuzzy.js, but I dind't looked much into it and thought I'll ask you first.

Bug: When user presses ArrowUp when on last item, the first item is highlighted

...rather than the second-to-last one

Search results don't have on:keydown, on:keyup, or on:keypress events and it triggers an A11y warning

I get the warning
svelte-typeahead/src/Typeahead.svelte:233:8 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event. wherever I use svelte-typeahead with svelte version 3.52.0

Workaround: Suppress the warning using <!-- svelte-ignore a11y-click-events-have-key-events --> for each of the result list item.

   {#if showResults}
      {#each results as result, index}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
        <li
          role="option"
          id="{id}-result-{index}"
          class:selected={selectedIndex === index}
          class:disabled={result.disabled}
...

If that workaround is good enough to be a solution for now, I can send a pull request.

styling overrides require more specific CSS selectors

For the results you just need:

:global([data-svelte-typeahead] li) {
  background: blue;
}

But for the form elements (input and label) you need:

:global([data-svelte-typeahead] [data-svelte-search] input) {
  background: blue;
}

TypeError: selectionTarget.value.substring is not a function

<Typeahead
  data={list} // object array
  {extract} // obejct.id
  on:select={({ detail }) => {
    console.log(detail);

    // gotoIndex(detail.selectedIndex); // a function for manipulating my custom store
  }}
/>

when I select a result I'm getting the error (title)

Is this importing svelte-search two times?

I'm using this amazing component in a "@sveltejs/kit": "1.0.0-next.142".

Analyzing with source-map-explorer I found that svelte-typeahead is ~7KB but there is svelte-search too ~4KB.

Is this correct?

Or am I importing svelte-search two times?

Scoped styling?

I have multiple instances on my route, a main one, and a wrapped version, the wrapped version has a different look, but the styles of the main version is being overwritten by the wrapped version, I'm using this for targeting:

/// main version
<style lang="postcss">
  :global([data-svelte-search] label) {
    @apply hidden;
  }
  :global([data-svelte-search] input) {
    @apply rounded-none rounded-r-lg bg-none;
  }
  :global([data-svelte-search] form) {
    @apply rounded-none rounded-r-lg;
  }
  :global([data-svelte-typeahead]) {
    @apply bg-none rounded-none rounded-r-lg;
  }
  select {
    @apply rounded-none rounded-l-lg w-fit pr-8;
  }
</style>

/// scoped version
<style lang="postcss">
  :global([data-svelte-search] label) {
    @apply hidden;
  }
  :global([data-svelte-search] input) {
    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
  }
  :global([data-svelte-search] form) {
    @apply rounded-lg;
  }
  :global([data-svelte-typeahead]) {
    @apply bg-none rounded;
  }
</style>

Allow setting a threshold score for result to be considered a match

I'd like to be able to set a threshold on what is considered a match. This is what I do right now:

<Typeahead
	hideLabel
	label="Search works"
	placeholder="Try me..."
	{data}
	{extract}
	let:result
	let:value
>
	{#if result.score >= 20}
		<div>
			<strong>{getTitle(result.original)}</strong>
		</div>
	{/if}
</Typeahead>

This kinda works, but I still see empty boxes where the results below threshold are:

Allowing for something like this to be set so only very close matches are shown would be nice.

Item is missing type annotation for `disabled` field

Auto-selected result should exclude disabled results

If the first result is disabled, it will still be highlighted as "selectable." The expected behavior is that the first non-disabled result should be highlighted if autoselect is true.

let:value no longer works since Svelte 4

Svelte 4 got rid of named slot bindings: https://svelte.dev/docs/v4-migration-guide#default-slot-bindings

So, the "no-results" fragment in the readme throws an error (ReferenceError: value is not defined).

Custom search function with async support

As title says, a prop like searchFunc that can return an array of strings, or an array of objects with {title: string, value: string, highlights?: {start: number, stop: number}[]}, or that but as a promise. (Removes the need to supply data)

This also requires a getLabel function for two way binding.

Willing to implement it myself.

Change or hide "Label"

Currently "Label" seems to be hard coded and fixed as it is not exposed as a prop on the svelte-typeahead, only on the svelte-search component.

Can't figure out how to hide it or change it.

Wrong aria-labelledby reference

Lighthouse is currently complaining about invalid aria attributes, which I believe is due an invalid aria-labelledby reference.

I am unsure of whether it even makes sense to have the aria-labelledby when it is hidden, but this seems to be separate to this issue.

The following Svelte

<Typeahead 
   data={availableChannels} 
   {extract} 
   inputAfterSelect="clear"
   limit={20}
   on:select={c => addUserChannel(c.detail.original)}
   hideLabel={true} 
   id="add-channel" 
   placeholder="Tilføj kanal" 
/>

returns this output

<div data-svelte-typeahead="" role="combobox" aria-haspopup="listbox" aria-owns="add-channel-listbox" aria-expanded="false" id="add-channel" class="svelte-t0wd5r">
   <form data-svelte-search="" role="search" aria-labelledby="search0.ddsho5m56h8">
      <label 
         id="search0.ddsho5m56h8-label" 
         for="search0.ddsho5m56h8" 
         class="svelte-5m0wg6 hide-label">Label</label> 
      <input
         name="search" 
         type="search" 
         placeholder="Tilføj kanal" 
         autocomplete="off" 
         spellcheck="false" 
         aria-autocomplete="list" 
         aria-controls="add-channel-listbox" 
         aria-labelledby="add-channel-label" 
         aria-activedescendant="" 
         id="search0.ddsho5m56h8" 
         class="svelte-5m0wg6">
   </form> 
</div>

with these errors

At first I believe propagating the Typeahead id-prop to Search would do it, but that would lead to duplicate ids between the containing div and the input element.

on:change is not triggered with option showAllResultsOnFocus

The component works as expected when used like this:

              <Typeahead
                label="Country"
                hideLabel
                limit={10}
                placeholder="Search Country"
                extract={(item) => item.NAME_0}
                data={regions0}
                bind:value={countrySelected}
                on:change={() => {
                console.log('expect an output')}
              >

With this I get the output expect an output

However, if I add the showAllResultsOnFocus like this:

              <Typeahead
                label="Country"
                hideLabel
                limit={10}
                placeholder="Search Country"
                extract={(item) => item.NAME_0}
                data={regions0}
                bind:value={countrySelected}
                on:change={() => {
                console.log('expect an output')}
               showAllResultsOnFocus
              >

I just get the expected output every other time.

Avoid dropdown when value is already selected

When the component gets focus and there is already a value selected, the drop down should not fire. When you just entered the page, the first click does not fire the dropdown (which is good) but after that any focus it gets will fire automatically the dropdown.

Here is a REPL where I am testing:
REPL

Ben