No Results option if search is empty

[nfq]

I was wondering how to show a 'No Results found' message if no results are found?

[trevoreyre]

Are you using the vue component? If so, you can do something similar to the example for the default slot.

[nfq]

I'm using the vanilla JS component!

[trevoreyre]

Ah, in that case you can use the onUpdate function to show/hide a no results message. You have to manage it manually, so it's not an ideal solution, but it's doable. Here's an example: https://codepen.io/trevoreyre/pen/oNbdBGM.

[nfq]

This is great, thank you. Right now, it shows 'No Results' while searching a big data set on a remote API, even if a result is eventually found. Is there anyway to show the message if no results are found, rather than while typing? Using setTimeout seems less than ideal. I'm honestly not sure how best to approach this.

[nfq]

I had a further idea: the spinner seems to work 100% correctly. Isn't there a way to trigger a 'No results' message after the data-loading is complete?

[trevoreyre]

That's not a bad idea. There are internal loading and loaded events. I wouldn't be opposed to exposing those as events if you're willing to put up a PR for it. It would look pretty similar to PR #82 which added the onUpdate event.

[nfq]

I'll give it a shot. How do I build and test the project locally? Rollup?

[trevoreyre]

For local development you should be able to npm start to run Storybook. By default it starts the JavaScript storybook at localhost:4003 and the Vue storybook at localhost:4004. Then I would add a new story that tests the events you're trying to add, like this story that tests the onUpdate event.

[nfq]

Working on this now. However, struggling to pass the 'results' param to the onLoading or onLoaded handler. Here's the handler:

handleLoaded = (results, event) => {
  this.loading = false
  this.updateStyle()
  this.onLoaded(results, event)
}

And here's the Storybook story:

export const Loaded = () => {
  const root = createRoot()
  const elem = document.querySelector('.loading')
  root.innerHTML = `
    <input
      class='autocomplete-input'
      placeholder='Search Wikipedia'
      aria-label='Search Wikipedia'
    >
    <ul class='autocomplete-result-list'></ul>
    <p class='loading' style='position: absolute; top: -40px;'>Loaded</p>
  `
  new Autocomplete(root, {
    search: searchWikipedia,
    getResultValue: result => result.title,
    onLoading: (event) => {
      console.log('searching...')
    },
    onLoaded: (results, event) => {
      if (results.length === 0) {
        console.log('no results')
      } else {
       console.log('found x results')
      }
    onSubmit: result =>
      window.open(`${wikiUrl}/wiki/${encodeURI(result.title)}`),
  })
  return root
}

[trevoreyre]

I'm not sure I understand the issue you're having. Do you mean in your handleLoaded handler, the results argument is not defined? Do you have a branch I could take a look at?

[cedm]

That'd be nice to expose that loaded event. I'm having the same issue: I need to show a message when no result is returned.

[augnustin]

I'm using Vue so I'm going for you defaultSlot solution, but it would be definitely nicer and simpler to have a #no-results slot instead.