Quote:
Hey Ravinder,
Here is a more "2019'ish tutorial" Javascript / HTML tutorial which is easy to follow and is more in line with how developers do things in 2019:
Quick Autocomplete App With JS & JSON
I recommended you code this tutorial using the same tools and technique as Brad.
Cheers.
Thanks a TON Neo for letting me/us know this great video. I have gone through it, I understood the concept of it but syntax vice it will take sometime
Let me put my learning from the video in points here.
1- Create a folder structure where we can keep fake json data, html file, JS file and CSS file.
2- Now copy json data from respective site into the file in your local system OR create it directly from VSC.
3- Get icons link mentioned by tutor in video(font awesome).
4- Get respective css file from site mentioned by tutor(or we could ours too
).
5- Create HTML file with all necessary tags, important thing is to mention CSS file link into <head> tag then create <div> tags for having components in them. Have a <div> tag for containing HTML code which will be generated by JS after reading JSON file(NOTE: We always create HTML components by their id or class names so that we can later access them in JS file and we create a place for html(which is coming from JS) too, to show it on page.)
6- Create JS file(where we will create 2 main functions, 1st is to fetch json values from JSON file and keep it into an array. We will also put regex in it to make sure any character is matching from array's value should come in output. 2nd function is for creating HTML file from array which we got from 1st function, later we will pass this newly created HTML output into tag which we created in HTML file to hold these values.
I have followed tutorial and created it, will try to do some more experiments with UI by adding few of my thoughts and share with everyone here.
@Neo, also I could try this for forum's user's search functionality too(which we discussed sometime back)
May be when get some more hands on.
Thanks,
R. Singh