Increased productivity Autocomplete Component

Wappler General How To
#1

I have a problem. How big or small I don’t know yet.

I create a form where the user must select a railway station. The station is selected by:

  1. Special code
  2. The name of the station
  3. the Route of the train (abbreviation in the form of three characters)
  4. The region in which the station is

For these purposes, the most appropriate (in my opinion) was an autocomplete input, in which the user enters data at their own discretion from the above points, and then selects an option from the ones offered in the request. I have configured this functionality and it works exactly as planned. But there is a PROBLEM:

The number of stations is 12 364. And when the user starts typing something in input, the page freezes. I first thought that my keyboard turns off when I take this input into focus. But then I realized that the problem is that the page freezes due to the fact that the processed request for a single character entered is simply huge. This was confirmed when I waited about two minutes for my text to appear in the input and thousands of options were offered to choose from to fill in.

Who has experienced this and how did you solve this problem? I will be grateful for any feedback or suggestions.

#2

How is your autocomplete configured? Can you post a screenshot of its options?

#3

Have you tried ticking the option 'Match Start’? Lowers the results returned significantly…

#4

For convenience, I have reproduced everything on a separate page to show clearly: https://howitisdone.info/autocomplete.html

Here’s how to set up the autocomplete on this page:

1
11826×869 284 KB

#5

This option is not suitable for me, because I need to search simultaneously for 4 fields in the table.

#6

Interesting…page works for me.

Screen Recording 2020-07-29 at 1.22.22 PM

#7

I didn’t say that the page doesn’t work. You just chose a very successful query that has very few options. :wink: Because of this, the response was received quickly and the page did not freeze. If you start typing with an “unsuccessful” character that has a large number of options, the page may be freeze for a few minutes…

#8

When using autocomplete, there is a huge difference in speed between matching anywhere or only from the start - at least where there are many records. If you could switch to matching from the start, the speed would probably be fine.

I had a situation where in most cases matching from the start would be sufficient, but wanted to offer the option to match anywhere, so I added a toggle like this:

image

… making the inputs switch (by controlling visibility). You could have 4 inputs like this, and the user could choose which of the four options they wanted to use for searching (ie they would only ever see one input). Perhaps not ideal, but I imagine there might be a default which most people might choose (eg probably not the special code).

It would be good if there were an option to specify the number of characters before matching started. There might be a way, but you can’t check the number of characters in the input field, because this field is not actually used at runtime. There might be a way of doing it checking the number of keystrokes.

1 Like