[Search and Autocomplete] Modify tab behaviour with openonfocus

[Search and Autocomplete] Modify tab behaviour with openonfocus

  
Forge Component
(15)
Published on 15 Feb by Leonardo Fernandes
15 votes
Published on 15 Feb by Leonardo Fernandes
Hi Leonardo,

Firstly great components & documentation (this + events). Just getting into it but loving the possibilities as I learn more about it.

When opening the  ResultsWebblock on focus, nothing is entered in the search input but the first record in the results is selected, if the user hits the tab key, the selected entry is returned, I'd like the end user to be able to hit tab and simply move to the next field with no action taken.  Is that possible?

Also, when a user selects a result item I'd like to move to the next input, currently it's two key strokes to achieve that i.e. tab 1 selects the record and returns the focus to the search input, then another tab key is required to move to the next field. Again, would that be possible.

Cheers,
Gavin

Hi Gavin. Thank you for your feedback.

Your scenario seems to be an optional field that you are binding to the autocomplete result. If I'm wrong, please correct me.

Yes, the first result is always selected by default. If you want a tab not to change the input value, you can create an extra result, with a text "leave empty" or something similar, and place it on the top.

Regarding the second question, about the TAB maintaining the focus on the autocomplete, I will consider changing this behavior in the future. Right now it doesn't seem possible - at least in a simple way.

But there are some alternatives that you might consider for the results to show when nothing is entered in the input...

Since the field is blank, your system cannot filter any result based on search criteria. If we think about the optimal results to show the user, they would be the most frequently selected options.

Suppose this were to be an ordering system for an italian restaurant. You would have to choose a dish, and three options are given: pizza, ravioli or tagliatelle. Let's say that 80% of the requests are for ravioli. Then, your top result should be ravioli, because 80% of your users could simply press TAB. Now it seems a good idea to select the first result by default, doesn't it?

Now, being an optional field, you might find out that 80% of your users leave the field empty. In this case, I would consider removing the field, or moving it to a separate section to remove clutter and make the form easier to fill for the 80% of the users. Of course, I would need more context to give you a good suggestion.

You can also try suggesting the top 3 most used results, or a list of the most recently used results, etc. In these cases, the user will have a few likely options right away, and if none is acceptable the user will have to write a search query.
Gavin, I have changed the behavior of the TAB key on the latest version of the Search and Autocomplete.

Regarding the first item being selected, I hope I gave you a viable alternative in my previous post. If you still think that it should be changed, please let me know.
thats amazing i like it 
Waterproof Mattress Cover

Hi Leonardo,

I have changed the behavior of the TAB key 

Fantastic mate, I'll try it out today.

" I hope I gave you a viable alternative in my previous post." 

I've implemented the "empty" vlaue as you suggested and I think it's going to cover what we need, just need to do some more testing.

I'm starting to use your component everywhere I have a lookup, even short lists, so I have consistent look, feel and behaviour. I use the OpenOnFocus for short lists for ease of use.

Thanks for the prompt support.

Cheers,
Gavin

 
 
Hello Gavin. I have just uploaded a new version of the Search and Autocomplete which has a new extension block called DontSelectFirstResult. You guessed it right, it prevents the first result from being selected by default. And you can, of course, use it together with the OpenOnFocus. That'll definitely solve your problems :)

It also has improved capabilities for creating reusable autocomplete blocks. So, if you are using the component everywhere as you mentioned, you might want to re-read the lesson that covers reusability. It now explains how to isolate the autocomplete from the search input, so you can create a web block that handles the autocomplete results, but the input field itself is defined on your screens.
Hi Leonardo,

Great work, using the "DontSelectFirstResult: extension, works well.

Building reusable autocomplete blocks is a sinch, working well also.

Cheers,
Gavin