Autocomplete Search Using Material UI and API

#AutoComplete #React #Arslan
How's it going y'all in today's video we're gonna learn how to create an auto-complete text field using Material UI and API.

Previous cool tutorials:

[tomaszmarczak]

Thanks for this tutorial. Helped me a lot.

[michiplays]

Awesome tutorial! One question-- when doing isOptionEqualToValue(), why do you return whether the first names are equal? How does it work when you try searching for their last name? Thanks!

[James-fewd]

Thanks for this tut buddy, this has been driving me up the wall today!

[AdrenWorld]

love your vids bro, there simple and to the point keep on going man.

[robinsonjoseloretoruiz]

Hello friend, excellent video! One question, I see that you make the API call and you already bring all the data and pass it to the AutoComplete component. How can I make the API search when the user is typing? I cannot bring all the data at once because it is a lot of information.

[nishantkumar]

You are my ass savior!! Thanks a ton, mate.

[haiderjaafer]

Great work keep going forward... How can make cascading autocomplete like company=> department=> unit

[LDK]

Great video but why is the repo some kind of video carousel?

[SulavNiroula-wggw]

If i have paginated data how to search the data that has not been loaded yet??

[HimanshuSharma-pzgv]

Hello there. Your video is amazing. But, I have one question in my mind. You are implementing autocomplete after fetching all the data back from the API Server. I want to implement this functionality from MUI out of the box to a major app (holding like 100, 000 - users). Now, what i did, is stored the data coming back from API Server into my redux state. I implemented pagination to those cards which are going to get filtered as per what shows up into the suggestion box(obviously if we click on one). But, since we are fetching such a huge amount of data in our querybox, would it pose any performance overhead to our application? even after we are storing it to redux state and then fetching it over here. Since we have implemented pagination to the cards, so there I feel there would not be any issue related to performance measures, but I feel here could be. What do you say? I found that there are other search engines like "Algolia React InstantSearch" ( the one MUI itself uses) out there, but I have to keep the budget under control, so couldn't go with that for the time being. Now Please tell me, is this way of using instant search is applicable for searching out of 100, 000 -users ??? Because we are making a call to API to bring all that data at once only. Please reply

[swethatm]

Hey, Awesome video, Is it possible to integrate MUI tree view with autocomplete?

[abdelmasiehbaselious]

I'm trying to update the array of options when the input changes on the Autocomplete but that results in an infinite loop of request, got an idea how I can fix that? or how I should do filtering from the server?

[saurabhu]

Like google search bar if we click on particular item we go to that link by using onClick how to give onClick to Autocomplete
There is no onclick property for Autocomplete how to give this
Please tell me
Thanks in advance

[SamsonAkkamolla]

i tried exact code however i dont see that search filters the data, anything i am missing, can you point to Github code the link below doesnt have code.

[TheNoirKamui]

Did this change considering nextjs v13?

[matteoerz]

when u ask for player data there's only the 1st page, no?

[saurabhu]

How to give onClick on search results i want to show the whole data on screen after clicking the search results please tell me how to give onClick on search results
Thanks in advance

[bestrada]

that's greats, but I don't found the git repository