Only fetch on typing and show results on focus

[stell]

Hi there,
when using:

trigger: {
    event: ["input", "focus"],
},

the result fetching is done every time. But if someone only types in a few chars, fetching is done and then he removes from focus and gets back into focus the fetching is done again, without being necessary, because nothing changed.

Is it possible to only fetch on typing and display already fetched results on focus?

[TarekRaafat]

Hello @stell,

Unfortunately, there's no way I'm aware of in the current version would help you do that.
Since all the events in the trigger.event are coupled to the input field interactions, still you might find out a workaround.

On the other hand, such behavior would be easily achievable in the new release v10 since there is an API for controlling the resultsList behavior out-of-the-box and I've added an events API as well upon receiving your issue to avail the behavior that you're looking for easier and leaner.

PS: v10 will be released within a week.

Cheers, and have a nice day! :)

[stell]

Sounds nice. Will check it when 10 is out. Thanks!

[TarekRaafat]

Hello @stell,

v10.0.3 is out now and the behavior you've asked about is now easily achievable using it as shown below.

You'll just have to add focus event on input using the new events API to start the engine on focus which won't fetch the data again incase it's cached already

// autoComplete.js Config Options
events: {
    input: {
        focus: () => {
            const inputValue = document.querySelector("#autoComplete").value;

            if (input.length) autoCompleteJS.start();
        },
    },
},

Please try it and let me know how it goes. Cheers! :)

[stell]

This works just fine:

focus() {
   // if (autoCompleteJS.input.value.length) autoCompleteJS.start();
   if (autoCompleteJS.input.value.length) autoCompleteJS.open();
},