search

thewca / worldcubeassociation.org

All of the code that runs on worldcubeassociation.org
https://www.worldcubeassociation.org/
GNU General Public License v3.0
329 stars 176 forks source link

Port the WCA autocomplete library to react and Fomantic UI #5456

Closed viroulep closed 3 years ago

viroulep commented 4 years ago

We currently use a (handmade) jquery plugin to handle the various fields with autocompletion in the website. We currently autocomplete on:

We do this in various forms on the website, including our omnisearch in the navigation bar.

As this is one of our few custom inputs, it will be necessary to port it to be able to fully switch to Fomantic UI and drop bootstrap.

I've put together a proof of concept here: https://github.com/viroulep/worldcubeassociation.org/pull/1/commits/9b30f5088fe845bca00649cf41840016fcb35464 (although it is slightly outdated with regard to the current state of #5340). It was actually fairly "easy" (modulo a good hour of styles tuning....) to come up with a component that could "drop-in" replace our custom input. The only thing I didn't address was linking this to a form input, it could probably be tackled by taking an input name as an option, and make the component fill the input value appropriately so that the form submit "just works".

shzcuber commented 3 years ago

I'm gonna give this a shot - anything else I need to know before I begin?

jonatanklosko commented 3 years ago

@shzcuber sorry for the late response, nothing particular comes to my mind, if you have any questions feel free to ask. A good start would be to try adding Philippe's work locally, so that it's up to date and then integrating it into the navigation bar.