Autocomplete search suggestions

[d-donne]

It'll be real smooth if there's suggestions of actual terms for when enter some words in the search box.
This could be essential for when you want to just learn some new words or you don't know the actual term in full. Keywords could help

[Rodelph]

I think it would be nice to set up a database that contains keywords multiple domains, languages, and tools. Something like :

• Core Programming

  • Algorithm
  • Data Structure
  • Variable
  • Loop
  • Conditionals (if-else)
    ...

• Web Development

  • HTML
  • CSS
  • JavaScript
  • AJAX
  • REST API
  • ...

I will give it a try. I think i might have an idea on how to do it, but will keep you posted.

[Buzzpy]

That'd be great but meanwhile, make sure you're subscribed to issue #15 where we will be discussing whether we should continue with a DB or use another way.

[Rodelph]

Hello everyone. I hope that you are doing well. I have managed to implement the autocomplete feature and it looks like this.

I did have to change quite few things in order to do this, but first let me tell you first about my approach.

I am currently using Aiven which is a data platform that can host online mysql databases (for free to a certain degree). Since our goal for now is just autocomplete. The database will not be big, thus we don't need to pay extra for a bigger storage. The free version is 5gb which is more than enough for this project i believe and we can even scale this platform using the free version.

For the project in question i had to turn the project into a web-app.

I believe doing it like this will only help us scale the project and allow us to do more things. Such as rewriting the cards for a better code structure.

I have a question regarding the autocomplete though. Do we get rid of the previous search that existed and uniquely use the drop down version that we are working on, or it is going to be both ?

Looking forward to hear back from you, and I remain at your disposal for any further information.

[Buzzpy]

It looks awesome, @Rodelph ! It's a lot of work and I'm really thankful for getting this into your hands.

However, we've decided to go with the Astro framework instead of a database, for better quality control. Would this affect your work a lot? I'm really sorry for the trouble, I was clueless at first and decided to go with Astro only about an hour ago.

By the way, the new search looks great, and once implemented correctly, we'll keep it instead of the previous one.

Thanks a bunch for your efforts... And please don't feel any pressure working on this, you've done more than enough 🤍

[Rodelph]

@Buzzpy That's fine, I was not able to do it earlier for some real life reasons.

I am glad that you are satisfied with my approach. Do I need to push the new branch and create a pull request for this ?

[Buzzpy]

Hello, again!
I'm sorry but I'm afraid we won't be able to merge the PR, as the database isn't the go-to approach in this project. As discussed in issue #38, we have decided not to go with database integration and go with the Astro framework where we can use markdown files for other terms.

I'm extremely sorry for any trouble that occurred and I still think we can integrate auto-complete with the new framework. But please be patient till we figure things out with it, and thanks a lot for bearing with it.

Also, if you don't feel like doing this all over again with some new framework, please feel free to do so. I really appreciate what you've done so far 👏

[Rodelph]

Hi @Buzzpy I am currently working on the autocomplete feature of the astro version. Since we have filter cards working for now, should i disable it when i get the autocomplete feature working ? It makes no sense to have both.

[Buzzpy]

Hello @Rodelph !
I think yes, you can remove filter cards once autocomplete is working.

A heads up: We will be soon creating a function to implement issues #3 and #18. I'm not sure if the autocomplete feature would have to do something yet though.

Thanks a bunch and all the best! ✨

[Rodelph]

Hello @Buzzpy !

I am coming back to you the autocomplete functionality. I managed to implement the feature using the astro branch and this is how it looks (i haven't worked on the css yet but the backend is functionnal).

What i do is basically I make a search into the folder that contains the json files and i extract the names from there (filter + format) and create an array that will be loaded to the autocomplete functionality in the hero-action.js file.

The autocomplete is as you see quite fast and responsive. I will work on styling it and let me know if i need to do any modification and when I need to create a PR.

I have seen the issues #3 and #18 but to me they seem like a different type of functionality. Please correct me if i am wrong, and I am looking forward to your feedback.

[Rodelph]

Hi again. I have done some styling and some code clean up and the results look like this :

I believe the autocomplete functionality is done (maybe some color adjustment). Any idea on what i can add ?

[Buzzpy]

Woohoo! That looks great, Rodolph.
I don't have anything else on my mind related to this, but if you have any ideas please inform me. Otherwise, it's good to go!

[Rodelph]

The PR has been created. Thanks for the feed back ❤️ . When will you deploy the new version (astro integration) to production ?

Note : I will create new issues with new ideas in mind to work on soon. 🚀

God Speed.

[Buzzpy]

As soon as possible! I'm working on a few issues and hopefully, it will take no more than a week!

P.S. Give me a thumbs up if this issue is ready to be closed (saw your PR message)

[Rodelph]

@Buzzpy I have updated the branch to have the feature fully working. I forgot to have it actually display the card... Thanks for the heads up and see you then.

You can check the PR and close this issue. 🚀

[RayMathew]

Minor improvement suggestion: After the user clicks on an autocomplete suggestion, the search box should still have the cursor active in it.

[Rodelph]

You mean the search box is still showing with the other keyword options ? if that's the case, why would we want to have that ? Generally for search box, you insert the word that you are looking for or just part of it. The autocomplete does the finding and you click then it goes away.

Or are you talking about the cursor being a pointer when finding the word in the suggestion table ?

[RayMathew]

You mean the search box is still showing with the other keyword options ?

No. I mean that even after a user selects something from the suggestion table he should have the option of pressing backspace and looking for something else. To do this, I have to click on the input box yet again, because the focus moved to the suggestion table.

I'm suggesting that we remove the need for clicking on the input box again. Attaching a video.

Screen.Recording.2024-08-18.at.3.23.17.PM.mov

[Rodelph]

I will work on this tmrw. Thanks for the suggestion.

I have a question for you. Do u think it's fine to have the card shown in the corner instead of the middle ?

@Buzzpy don't close this issue yet please.

[RayMathew]

No problem.

Yeah that seems completely fine to me.

[Rodelph]

Hi @RayMathew . Can u review my PR ? 🙏

[Rodelph]

@RayMathew I have added the up and down navigation and as you can see the focus remains on the search bar.

If this is satisfactory then maybe we close this issue @Buzzpy ?

[RayMathew]

@Rodelph the focus issue isn't completely solved yet. It works fine when you select something from the autosuggestion table. But the original issue I mentioned about clicking on a suggestion and losing focus is still there.

[RayMathew]

As discussed elsewhere, I'll work on the fix for clicking on a suggestion and losing focus. @Buzzpy please assign me?