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

[zeddrix]

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.

[metonym]

This is supported in v4.1.0.

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

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

Give it a try and LMK what you think.

[zeddrix]

Alright this is nice. Thanks! First of all, as a reminder for other folks who want to implement this too on their code, run npm i svelte-typeahead again to have that v4.1.0.

And second, I didn't see the "No results found..." text because it's colored white. So to solve this, I needed to wrap the text with a paragraph tag:

<svelte:fragment slot="no-results">
    <p style="color: black;">No results found.</p>
</svelte:fragment>

Thanks for implementing this. I hope we get to pick an icon for this search bar soon:)

[metonym]

And second, I didn't see the "No results found..." text because it's colored white.

Interesting; I'm unable to replicate this behavior. It should be inheriting the color from ancestor elements.

Thanks for implementing this. I hope we get to pick an icon for this search bar soon:)

PRs are always welcome.

[fredguth]

Closed, right?

[metonym]

Indeed. A "no-results" slot was added in #31 and released in v4.1.0.

Opened a separate issue (#50) to track the "custom search icon" feature request.