Ch/replace dropdown with search

[Angekarara]

Fixes #69

This PR replaces the dropdown used for selecting options that are possible for the API calls on the client side ap with searchable input field. The change improves user experience by making it easier for the user to find what they need especially when the list is long.

[iAmNsengi]

This looks identical, aren't they always going to return true?

[Angekarara]

Worked on it👍

[josue-igiraneza]

👍🏾

[MikeManzi]

LGTM!

[MahdadGhasemian]

Thanks, everyone, for the contributions!

I have a few suggestions regarding the 'searchable input' #69 that I think could improve the UX.
Here are my thoughts:

1. Displaying all items initially: When the user doesn't type anything, the input should ideally show all available function names. This would help users see all the options at first glance before they start filtering.
2. Re-showing the list after selection: After user types a function name and selects it, it would be better if the list of options reappears when the input box is clicked again. This would make it more intuitive.

To summarize, I think the Material UI Autocomplete component provides a good model for this type of search box. Here's a link to a demo of it:

Material UI Autocomplete Example

Thanks again!

[Angekarara]

Thanks, everyone, for the contributions!

I have a few suggestions regarding the 'searchable input' #69 that I think could improve the UX. Here are my thoughts:

1. Displaying all items initially: When the user doesn't type anything, the input should ideally show all available function names. This would help users see all the options at first glance before they start filtering.
2. Re-showing the list after selection: After user types a function name and selects it, it would be better if the list of options reappears when the input box is clicked again. This would make it more intuitive.

To summarize, I think the Material UI Autocomplete component provides a good model for this type of search box. Here's a link to a demo of it:

Material UI Autocomplete Example

Thanks again!

Hi @MahdadGhasemian , I have implemented the suggested changes.
Thanks

[MahdadGhasemian]

Hi @Angekarara
Thank you for your brilliant contribution !

I've just tested your recent changes and wanted to share a few notes :

1- Icon Issue : There are two icons (close and dropdown) that seem to have rendering issues. I've marked them in red in the screenshot below :

2- getResponse Not Working : The getResponse function wasn't working initially. I found out that the selector `select[name="endpoint"]' needed to be updated to '#selectedOperation' .
I’ve already made this change locally and suggest updating the code as follows:

  const inputString = document.querySelector("#inputString")?.value;
  const endpoint = document.querySelector('#selectedOperation')?.value;

3- UI Adjustment : I suggest increasing the width of items selection same as the inputString , that marked with red color . Also It would be to great to reduce the gap between two section (highlighted in green) :

Thanks again @Angekarara

[Angekarara]

Hi @Angekarara Thank you for your brilliant contribution !

I've just tested your recent changes and wanted to share a few notes :

1- Icon Issue : There are two icons (close and dropdown) that seem to have rendering issues. I've marked them in red in the screenshot below :

2- getResponse Not Working : The getResponse function wasn't working initially. I found out that the selector `select[name="endpoint"]' needed to be updated to '#selectedOperation' . I’ve already made this change locally and suggest updating the code as follows:

  const inputString = document.querySelector("#inputString")?.value;
  const endpoint = document.querySelector('#selectedOperation')?.value;

3- UI Adjustment : I suggest increasing the width of items selection same as the inputString , that marked with red color . Also It would be to great to reduce the gap between two section (highlighted in green) :

Thanks again @Angekarara

@MahdadGhasemian , i've worked on the issues please let me know if you spot anything else

[MahdadGhasemian]

Hi @Angekarara , thanks so much for your contribution! 🙏

In your latest commit, everything seems to be addressed perfectly.
I really appreciate your patience and the effort your put into this work.

Great job, and thanks again! 🚀