search

zero-to-mastery / WebBlocks

zero-to-mastery re-usable web component library.
https://zero-to-mastery.github.io/WebBlocks/
MIT License
22 stars 60 forks source link

SearchBox Component with Auto Completion #12

Closed software-trizzey closed 3 years ago

software-trizzey commented 3 years ago

A reusable search box with the ability to autocomplete a user's input would be an excellent component.

Besides the autocompletion, the component should allow the developer to specify its size or behave in a more responsive manner.

Some other interesting features would be basic input validation, a helper text property, a built-in submit button, and other types of styling customizations.

Chetan-khachane commented 3 years ago

Autocomplete users' input is like how 'google search autocompletes' works for users input or it can be through HTML autocomplete attribute which works on past data? Tell me what approach should be used for creating this component? @IM-Deane

software-trizzey commented 3 years ago

@theonly1me Done deal. Have fun! 🚀

theonly1me commented 3 years ago

Sorry, but I'm unable to complete this at the given time. Would definitely love to contribute to this project sometime in the future. Thank you.

juancwu commented 3 years ago

Is anyone doing this? I would like to take this task as a challenge. Will the autocomplete mechanism be based on a database where it relates to what the user is typing or is it just autocompleting old searches? @IM-Deane

software-trizzey commented 3 years ago

Hi @juancwu, i'm not sure if @Chetan-khachane is still working on this. However, I'm sure he wouldn't mind an extra pair of hands.

As for the autocomplete, we would like the data to be based on a database. Basically, the user should be able to search/filter through some data that the component is connected to.

In this case, the data can simply be mocked from a static json file.

juancwu commented 3 years ago

@Chetan-khachane Are you working on the component? I would like to help out in any way I can.

Chetan-khachane commented 3 years ago

@Chetan-khachane Are you working on the component? I would like to help out in any way I can.

@IM-Deane, @juancwu I am not working on this component.

juancwu commented 3 years ago

Hi @IM-Deane, would it be okay if I used an google api to do a query and use the json response to show to autocomplete mechanism?

Chetan-khachane commented 3 years ago

Hi @IM-Deane, would it be okay if I used a google api to do a query and use the json response to show to autocomplete mechanism?

@juancwu, I was also thinking the same.

juancwu commented 3 years ago

Hi @IM-Deane, would it be okay if I used a google api to do a query and use the json response to show to autocomplete mechanism?

@juancwu, I was also thinking the same.

I ended up creating a json file with some random text. It works pretty good.

software-trizzey commented 3 years ago

Hey @juancwu @Chetan-khachane, the minimum requirement is to have some basic test data that can be used to demonstrate functionality. The json file can contain any type of data you'd like, as long as it works with the component.

If you'd prefer to use an API to get that data then go for it. 🚀

juancwu commented 3 years ago

Hey @juancwu @Chetan-khachane, the minimum requirement is to have some basic test data that can be used to demonstrate functionality. The json file can contain any type of data you'd like, as long as it works with the component.

If you'd prefer to use an API to get that data then go for it. 🚀

Alright, I actually already finished the component but haven't written any documentation. I will be creating a PR soon.