1

I have a long list of functions (around 50) and I would like to build a typeahead feature for it. When you press D the selection should jump to the first entry that starts with an D (for Excel it is DATE).

Questions:

  • What happens if I type an 'A' as the next character? Does it stay at 'DATE' or jump to the first entry with 'A'?
  • If the system saves more than one character ('DA') when does it erase its memory and the user can start fresh? 200ms, 500ms?

What would you expect?

This is a screenshot from Excel, my interface looks similar.

excel formulas

1 Answer 1

1

I'd recommend you consider how web browsers handle keyboard events for <select> elements. For cases like this, it's often helpful to try and find other established patterns so the user has the best chance of pulling from existing knowledge in order to use your UI effectively.

Try focusing on the first example <select> element on that site, and typing sp with varying delays. There is, by default, some brief but unspecified delay that you hint to in the second part of your question. A common time (for whatever reason) that I tend to see often in web development is a 400ms delay, so I'd start with that and see if it feels right.

4
  • Thanks for the pointer. I looked at how Excel and Apple's finder are doing it but it was hard for me to deduct what they were doing on the inside.
    – Nash
    Aug 25, 2020 at 16:29
  • 1
    The delay in the <select> tag is around 1.17s/1.18s. At least that's what I got from experimenting with timed keypresses.
    – Nash
    Aug 26, 2020 at 8:20
  • 1
    @Nash Interesting. For the life of me I couldn’t find any documentation on the exact timing browsers use before interpreting keypresses as the start of a new input. Good to know! Aug 28, 2020 at 4:35
  • I also could not find anything online. I don't know how accurate those numbers are and if they depend on OS or browser but they are a good starting point for me.
    – Nash
    Aug 28, 2020 at 7:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.