React autocomplete search from API

Подписаться 6 тыс.

Просмотров 52 тыс.

50% 1

In this video , we are going to create an web that include an input field with autocomplete function. This can conduct autocomplete search from API.
The web will fetch the data from the server, there will be suggestions appear underneath the input field when the user is typing.
Source code:
www.udemy.com/course/complete...
Get Free Udemy Courses and latest news
t.me/ckmobi
00:00 Start a new project, install axios and adminlte
03:41 Create the onchangehandler function
05:38 Make suggestions base on user input
08:02 Render the suggestion list
10:44 Select the suggestion
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🔥Complete Courses🔥
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
React native Expo for multiplatform mobile app development
www.udemy.com/course/react-na...
Complete NodeJS course with express, socket io and MongoDB
www.udemy.com/course/create-n...
Complete Progress Web App BootCamp
www.udemy.com/course/complete...
Complete Modern JavaScript BootCamp from the beginning
www.udemy.com/course/complete...
React - The Complete Guide with React Hook Redux 2020 in 4hr
www.udemy.com/course/complete...
Vue JS and Firebase:Build an iOS and Android chat app [2020]
www.udemy.com/course/vuejs-an...
New SAT Math Course
www.udemy.com/course/new-sat-...
New SAT Math Practice Test Explain
www.udemy.com/course/new-sat-...
Get A* in GCSE Maths (Quadratic equations and graph)
www.udemy.com/course/get-a-in...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💟Follow me
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
‣‣ Udemy ► www.udemy.com/user/cyruschan2/
‣‣ Twitter ► / ckmobilejavasc1
‣‣ Facebook ► / javascript.ck
‣‣ Instagram ► / ckmobile8050
**Equipment that I use**
Macbook Pro
amzn.to/2CC41HV
Blue Yeti USB mic
amzn.to/3jf3gph
Camtasia
amzn.to/30aopbg
#javascript
#webdevelopement

Опубликовано:

13 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 45

@michaelguandique9507 5 месяцев назад

Great work bro, this lets me understand how to filter the autocomplete with strapi Api.

@for41 2 года назад

to be honest I was sceptical at first, it was hard to follow, because of the way you speak, but 30 seconds in I realised you know what you are talking about. Well done!!

@guilhermeborges9748 2 года назад

This tutorial is excellent, simple and clear!

@Emjoj18 3 года назад

Amazing tutorial! it helped me a lot. thank you

@veetcee3818 2 года назад

This helped me create something similar, it was exactly what i was looking for and you explained it perfectly! Thank you

@ckmobile 2 года назад

Thanks 🥰

@sayanmondal9705 2 года назад

THANK YOU VERY MUCH BROTHER.. YOUR TUTORIAL IS OF GREAT VALUE

@saifsaeed1158 2 года назад

amazing , thank you so much my man

@lucasfr86 2 года назад

Very cool tutorial!!! amazing!!

@georgesword2012 2 года назад

Thank you very much for this nice and clear tutorial!

@ckmobile 2 года назад

Thanks 🥰

@jihedlearning3765 2 года назад

amazing tuto , thanks :D

@joyeedwin9447 2 года назад

Thank you very much for your help !! A great tutorial !

@ckmobile 2 года назад

Thank you 🥰

@sajibpandit1130 3 года назад

Thanks dude..❤

@ItsNoahHi 2 года назад

Thanks!!

@dangvan6603 2 года назад

nice video. thank you so much!

@ckmobile 2 года назад

Thank you Dang Van😘

@danieltkach2330 2 года назад

Many thanks.

@dmitriyfishman4023 3 года назад

Cool!

@EliasAfara 2 года назад

This is amazing!!

@ckmobile 2 года назад

thank you ❤

@sathishkumar2852 2 года назад

you are a magician

@user-qj8vt7fy5g 2 года назад

Dude you helped me very much. like. subscribe !!! Thank you !!! Keep doing what you do 🔥🔥🔥🔥👍👍

@ckmobile 2 года назад

Thank you 🥰

@errtya6989 2 года назад

Cool

@phantazzor 3 года назад

thanks

@phantazzor 3 года назад

neet to add [text] in the array of the useEffect to be working

@robeeeeen Год назад

Excellent, thank you. but when I enable onBlur, sometimes it does not select from the list. How to resolve this? help please

@LucasRodrigues-tz9og 2 года назад

I am use typescript, in the if() when I do return user.email.match(regex) typescript give a error : Property 'email' does not exist on type 'never'. How can I fix this?

@gursanjam37 2 года назад

Error cannot read properties of undefined (reading 'filter' )

@ronenchristy5236 3 года назад

Hi I enrolled in your Udemy Course [Vue JS and Firebase:Build an iOS and Android chat app (2021)] I hit a roadblock in Lecture 7: Implement Vuex. Error in terminal: WARNING in ./src/pages/store/store.js 3:0-7 export 'default' (imported as 'Vue') was not found in 'vue' Error in Chrome: Uncaught TypeError: Cannot read property 'use' of undefined Please help

@migerusantte Год назад

what about handling pagination?, incomplete tutorial...

@robit89 Год назад

when i add onBlur code and refresh the localhost and type some related word in input then suggestion can't be picked since the setTimeout is executed , how to solve this

@siratmohaiminulislam8677 Год назад

great tutorial! at 7:01 when you started typing useState, you entered the suggestion and the whole syntax of useState appeared, my vs code doesnot do that although I have the latest version installed. How did you do that?

@ckmobile Год назад

i used the es7 extension in vscode

@siratmohaiminulislam8677 Год назад

@@ckmobile thanks a lot, it worked! 😁

@MamamimPlodtook 2 года назад

How I can show "the result not found" if text is not matches ?

@ageconcepts9829 2 года назад

typing ) or ( throws an error though. How can I fix this?

@vipinpatel9572 2 года назад

what is "gi" please help me autocomplete search from contact number in api

@HimanshuSharma-pz9gv Год назад

hello there, your tutorial is amazing. But I have a question, what if there is a huge amount of data residing into our server?? Say a 100, 000, 000 - user records? Is this utility is good in that scenereios? Because you are calling API to bring all the data at once, and beleive me this is a very huge amount of data to handle. What would we do then ? Doesn't it impose any performance overhead or the load time of this specific page where this search utility is embed? I mean the way we fetch the data by applying pagination to only fetch chunks of data, couldnt we do a similar thing to our search bar suggestion box too? Like I mean, the logic should clutch with the API Server, search for the relevent words, and only fetch those data items which matches loosely , say 10 - 20 data items , and once the user wipes out, and starts typing new word, it should fetch the other matchable set of the data items from the API Server .... How could we achieve this functionality? or , is this way of searching API and suggesting the clients, holds good for this much enourmous amount of data?