Show options upon initial focus

[ericraider33]

I have the following use case:

• type ahead for finding other users
• prefetch data that retrieves the top 10 most commonly selected user. (90% of the time, the desired match will be in the prefetch)
• current user focuses on the field
• without needing the type, I'd like the prefetched list to show
• if the desired user is in the prefetch list, then no need to type, just select the desired user and move on
• if the desired user is not in the prefetch list, then current user starts typing and list of names is updated based upon input

I see in the docs how to prefetch, but I don't see any way to get the list of options to appear without typing at least one character in. If you use Google or Github's search feature, you'll see it is common to show suggestions without requiring the user to type anything in.

[niketpathak]

@ericraider33 Hello, it is possible to display a list of default suggestions.
There is an example on the playground. The first example found here -> https://typeahead.digitalfortress.tech/#playground?id=colors-example

For your use case, I'd suggest storing the prefetched items in the localStorage and then later reusing the same in the "empty" template.

Something like this:

typeahead({
  input: document.querySelector('.myInput'),
  source: {
    prefetch: {
      url: 'https://your-endpoint',
      process: (items) => {
        localStorage.setItem('users', JSON.stringify(items));
      },
    },
  },
  templates: {
    empty: (resultSet) => {
      return JSON.parse(localStorage.getItem('users'));
    ,}
  }
});

[ericraider33]

Yes, that did the trick. Thanks for your rapid help.

[Carpani]

Hello.
I'm trying to do something similar but using some data precache for me in some variable.

I'm testing to do that using the "empty" template, but, the resultSet received by empty has a limit = 5.
Who is passing that value ?

Thanks.

[niketpathak]

Hello, this is a config parameter whose default value is 5. You can always override it See related docs for more info. https://typeahead.digitalfortress.tech/#config?id=limit

[Carpani]

Thanks. I miss that parameter.