React Beginners Tutorial - Build an Autocomplete Text Box
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Nedha
Where the problem does not show Thes items name in AutoComplete
import React from 'react';-
export default class AutoComletText extends React.Component --
constructor (props) --
super(props);-
this.items = [-
'Angel',-
'Joker',-
'Sara',-
'Laure',-
];-
this.state = --
suggestions : [],-
-;-
--
onTextChanged = (e) => --
const value = e.target.value;-
let suggestions = [];-
if (value.lenght > 0 ) --
const regex = new RegExp(--$-value--,'i');-
suggestions = this.items.sort().filter(v => regex.test(v));-
--
this.setState(() => (- suggestions -));-
--
renderSuggestions () --
const - suggestions - = this.state;-
if (suggestions.length === 0 ) --
return null;-
--
return(-
-suggestions.map((item) => -item-)--
)-
--
render () --
return(-
-this.renderSuggestions()--
)-
--
-
reply
Where the problem does not show Thes items name in AutoComplete
import React from 'react';-
export default class AutoComletText extends React.Component --
constructor (props) --
super(props);-
this.items = [-
'Angel',-
'Joker',-
'Sara',-
'Laure',-
];-
this.state = --
suggestions : [],-
-;-
--
onTextChanged = (e) => --
const value = e.target.value;-
let suggestions = [];-
if (value.lenght > 0 ) --
const regex = new RegExp(--$-value--,'i');-
suggestions = this.items.sort().filter(v => regex.test(v));-
--
this.setState(() => (- suggestions -));-
--
renderSuggestions () --
const - suggestions - = this.state;-
if (suggestions.length === 0 ) --
return null;-
--
return(-
-suggestions.map((item) => -item-)--
)-
--
render () --
return(-
-this.renderSuggestions()--
)-
--
-
reply
Abhishek
Extremely useful video! Thanks a lot!
I have a question though, which is not exactly related to React but web dev in general.
I am querying a third party API for the data, and just considering the pros and cons of setting up an autocomplete textbox as opposed to a normal textbox with a search button. The autocomplete way of doing this will obviously query the external API servers every single time I type something in the textbox. Now, even though that looks nice from the user's perspective, it probably is a lot more expensive on the servers. If it were my own servers, I wouldn't think much of it. But that isn't the case, hence my hesitation.
I would really appreciate any help in choosing which route to take. Thanks again!
reply
Extremely useful video! Thanks a lot!
I have a question though, which is not exactly related to React but web dev in general.
I am querying a third party API for the data, and just considering the pros and cons of setting up an autocomplete textbox as opposed to a normal textbox with a search button. The autocomplete way of doing this will obviously query the external API servers every single time I type something in the textbox. Now, even though that looks nice from the user's perspective, it probably is a lot more expensive on the servers. If it were my own servers, I wouldn't think much of it. But that isn't the case, hence my hesitation.
I would really appreciate any help in choosing which route to take. Thanks again!
reply
Thomas
I understand how this works, but mostly when you do this you are using a backend api, and you may only want 7 results to come back at a time. For instance if it was google there may be thousands of items in your array. So how could we modify this to send to a backend api and get back only like 7 results. Obviously you would have to send extra information into the class like the url and such. Would it be easy to change it so that is possible. I am going to have a go myself, and let you know how I get on.
reply
I understand how this works, but mostly when you do this you are using a backend api, and you may only want 7 results to come back at a time. For instance if it was google there may be thousands of items in your array. So how could we modify this to send to a backend api and get back only like 7 results. Obviously you would have to send extra information into the class like the url and such. Would it be easy to change it so that is possible. I am going to have a go myself, and let you know how I get on.
reply
Shaurya
My App.js file is pretty different from the one shown in the video. Is this because of the updated version of the React?
I am a beginner and I am totally lost. Can someone point me in the right direction?
reply
My App.js file is pretty different from the one shown in the video. Is this because of the updated version of the React?
I am a beginner and I am totally lost. Can someone point me in the right direction?
reply
Pavneet
Nice tutorial!
though no need to call -npm install -g ...- for the search bar(second project).
just call -create-react-app project_name- to create second application(make sure to change path)
reply
Nice tutorial!
though no need to call -npm install -g ...- for the search bar(second project).
just call -create-react-app project_name- to create second application(make sure to change path)
reply
Daniel
I'm beginner on React. Could someone explain me , why he is not using event binding on the functions? And in which cases related to the exercises it'll be fine use event binding?
reply
I'm beginner on React. Could someone explain me , why he is not using event binding on the functions? And in which cases related to the exercises it'll be fine use event binding?
reply
Hasuni
Hello... Could you tell me, please, how can I close with suggestions if user clicked on other elements (not suggestions or input)? I tried to use onBlur, but it works incorrect.
reply
Hello... Could you tell me, please, how can I close with suggestions if user clicked on other elements (not suggestions or input)? I tried to use onBlur, but it works incorrect.
reply
sailaja
Its very useful but please clarify my doubt you are using ul and li so that how can we select the options by using downshift key up and key down. Can you please explain??????
reply
Its very useful but please clarify my doubt you are using ul and li so that how can we select the options by using downshift key up and key down. Can you please explain??????
reply
LucidProgramming
Haven't watched the entire video yet, but the delivery and video are quite well done. Looking forward to checking out the rest of it soon. Cheers!
reply
Haven't watched the entire video yet, but the delivery and video are quite well done. Looking forward to checking out the rest of it soon. Cheers!
reply
Xavier
I liked the content, but I question the decision to not modularize your files. Seeing js and css files in the same directory triggers me.
reply
I liked the content, but I question the decision to not modularize your files. Seeing js and css files in the same directory triggers me.
reply
Add a review, comment
Other channel videos
