Autocomplete in the project search box

[renatoassis01]

Tip

Support for autocomplete in the project search box on the home page. Maybe using algolia (https://www.algolia.com) would be a good solution.

[brainwane]

Thanks for the suggestion, @RenatoAssis! I think #3462 and #727 might be relevant here -- in fact, depending on how we decide on #3462, this may be a duplicate of that.

@RenatoAssis are you by any chance interested in working on this?

[di]

I think this could probably be done with our existing Elasticsearch queries (which we already have) rather than another tool.

[renatoassis01]

@brainwane I'd love to, but I'm still new to programming = /. One day I'll contribute to some opensource project. Thanks for the invitation :)

[waseem18]

I would like to look into this @brainwane

[brainwane]

@waseem18 great, looking forward to you working on it! I'm not sure how autocomplete stuff would end up affecting caching, performance, and stuff like that, so it's probably going to be an iterative process, adding that feature, where you share thoughts with us and we talk about pitfalls.

Thanks so much.

[waseem18]

I've been working on this issue since a couple of days and this is what I came up with. This is an initial version and can be improved in terms of both UX/UI and ES queries. After some more changes, I'll put in a WIP PR.

@nlhkabu Whenever you're free could you please help me with the UX? Thanks

[nlhkabu]

hi @waseem18 - this is awesome!

I think for this feature we should very heavily model ourselves on Google auto complete. One thing they do which is cool is highlight the section of the search term which is unmatched:

Example:

Would something like this be possible?

It's worth also testing in advance how this works for users using only their keyboard. Can they tab through the suggestion list?

Thanks again!!!

[pradyunsg]

Can they tab through the suggestion list?

I feel using up and down arrow keys would be more intuitive (that's what Google does). :)

[waseem18]

@nlhkabu Highlighting the matched or unmatched terms is really cool. I got an idea on how to implement this and will put it in my PR today.

And as @pradyunsg pointed it would be more intuitive to use up and down arrow keys rather than tabs.

[di]

@waseem18 How's that PR coming?

[waseem18]

Hey @di

Sorry for the delay. I couldn't put the PR due to office work load. I'll create a PR today.

[di]

@waseem18 No worries! Just wanted to help get you unstuck if you were blocked on something.