JavaScript Project | Create Product Search Engine/Bar/Filter in JavaScript

  Рет қаралды 212,303

Tech2 etc

Tech2 etc

Күн бұрын

Пікірлер: 220
@Tech2etc
@Tech2etc 3 жыл бұрын
JavaScript Project | Create Product Search Engine/Bar/Filter in JavaScript. - Need Your Support Guys. Help Me To Reach 200K SUBSCRIBERS 🔥 More JavaScript Projects: kzbin.info/aero/PL9bD98LkBR7P16BndaNtP4x6Wf5Ib85Hm Timestamps: 0:00 Intro 1:41 File Directory 2:40 HTML For Search Bar Interface 4:52 CSS For Styling Search Bar Interface 9:55 Adding Products and Details 11:35 Styling Product Image & Details 14:34 Adding More Products 15:08 Fixing More Products in CSS 16:55 Make Search Bar working in JS 17:33 Creating Function 20:48 Matching Products Showing 23:40 Removing Unmatched Products 24:37 Quick Demonstration (Important) 27:04 Lets See What we have made Download Images: www.patreon.com/posts/58490866
@Chandraprakash-kx4ic
@Chandraprakash-kx4ic Жыл бұрын
Waiting for 100K SUBSCRIBERS 🔥
@SIDDHARTHwakade
@SIDDHARTHwakade Жыл бұрын
Bro there is an issue we have to refresh page every time to search new product
@Sweet-ex8ln
@Sweet-ex8ln Жыл бұрын
Js concept not understand in search engines
@Tech2etc
@Tech2etc Жыл бұрын
@@Sweet-ex8ln Hey bro.. If you are trying to clear your js concepts by just watching one video.. Then wake up from your sleep. Programming is not for you. Find another passion or field. I have seen people who are sticking to js nearly over a year just to learn the basics. Im not here to demotivate you, just giving you reality check 👍
@jayshah5065
@jayshah5065 Жыл бұрын
Thank you for this!!! I tweaked the code according to my requirement and it worked just perfect!!! you are doing a great job !!
@bharatisingh6097
@bharatisingh6097 Жыл бұрын
Too good ....just done making this ...and without your help wouldn't be possible... thank you so much 🙏❣️
@tenc6491
@tenc6491 2 жыл бұрын
One of the best out there. I can't thank you enough for this immensely informative and easy-to-understand tutorial. Also, I appreciate the fact that you took the time to explain everything (again) before wrapping up your video. I've happily subscribed and now, I am going to watch all your videos to learn more Javascript. Thank you again mate!
@Tech2etc
@Tech2etc 2 жыл бұрын
Im glad that you are enjoying this channel
@tenc6491
@tenc6491 2 жыл бұрын
@@Tech2etc I am indeed enjoying this channel. It's a great discovery.
@mocresan
@mocresan 2 жыл бұрын
++++
@RajPal-i2w
@RajPal-i2w Жыл бұрын
Pls any one give me the code in comment box
@Logicrealtor_dubaipro
@Logicrealtor_dubaipro 3 жыл бұрын
You're a great teacher, you should have a coding Bootcamp
@Tech2etc
@Tech2etc 3 жыл бұрын
Thanks man
@ad.infinitum.per.aspera
@ad.infinitum.per.aspera 7 ай бұрын
A super project for beginners to sum up their basic knowledge. Thank you!
@stever2507
@stever2507 Жыл бұрын
You explain coding JS very well. The best is that you say all that is needed and no more extra stuff said. thanks for sharing.
@techoutlook9235
@techoutlook9235 2 жыл бұрын
This is fantastic. So many possible project ideas based on these functionalities thank you
@abumursad
@abumursad 2 жыл бұрын
Bro... JavaScript ki playlist upload kijea... Your teaching method is awesome...
@indianmuskofficial9278
@indianmuskofficial9278 2 жыл бұрын
thanks for the overflow-y : scroll and offcourse the whole project its awesome
@Tech2etc
@Tech2etc 2 жыл бұрын
More projects are coming soon. Please share this project on your social media. It will help us. Thanks.
@abumursad
@abumursad 2 жыл бұрын
I love Tech2etc's content very much...
@only____4471
@only____4471 Жыл бұрын
thanks brother . i never see some one like you everything in your video are clear and easy coding thanks a gain bro👑👑
@Mola5asatAflam
@Mola5asatAflam 2 жыл бұрын
Hello, thank you very much for this wonderful video, but I have a question, if you allow me, how can I hide the list of products where the results appear only when I search from the search bar, for the products I search for??
@majdnaomy4330
@majdnaomy4330 2 жыл бұрын
TNice tutorials is absolutly the best video of the world you expaining skills are good and it was a honor to see tNice tutorials vid well done
@semicolon6499
@semicolon6499 2 жыл бұрын
thanks a lot sir i finding this method and we get and i emplemet this work fine love you...
@Tech2etc
@Tech2etc 2 жыл бұрын
Tnx dear
@shivrajprachande540
@shivrajprachande540 7 ай бұрын
Thank you so much !! Keep Making such videos more 😍🥰
@KOKEELSPORT
@KOKEELSPORT Жыл бұрын
Working properly ..thanks man.
@sajjadlatafaty2547
@sajjadlatafaty2547 3 жыл бұрын
very perfect....Create JavaScript projects again, I enjoyed it, thank you
@Tech2etc
@Tech2etc 3 жыл бұрын
Most welcome
@Tech2etc
@Tech2etc 3 жыл бұрын
Please check JavaScript projects playlist for more projects like this.
@jhonsnow9911
@jhonsnow9911 Жыл бұрын
thanks heaps mate this is something I wanted to implement on my own project and worked perfectly!
@shivprasadkavathe5098
@shivprasadkavathe5098 2 жыл бұрын
Ohh thank buddy ,I was looking for a same type of video since so long.
@Tech2etc
@Tech2etc 2 жыл бұрын
Your most welcome. Please share this project on your social media. Will appreciate that.
@csgameng1128
@csgameng1128 Жыл бұрын
wow great video, easy to follow and well explained
@unknownroaster5477
@unknownroaster5477 6 ай бұрын
Thanks a lot sir, it was really helpful and informative
@fazliddinfayziyev8072
@fazliddinfayziyev8072 2 жыл бұрын
Hello bro. Thank you. I liked it. It is the best project I have ever seen. ✊. I wish you all the best. Thank you bro.
@huynhthanhtuaptechhcm3327
@huynhthanhtuaptechhcm3327 2 жыл бұрын
Your demonstration is perfect 👌
@Tech2etc
@Tech2etc 2 жыл бұрын
Thank you so much
@gayatridodiyagayatridodiya7469
@gayatridodiyagayatridodiya7469 2 жыл бұрын
Thank you sir And sir your way of explaining is great and This video is very useful for those who want a working search bar.
@Tech2etc
@Tech2etc 2 жыл бұрын
Your Most welcome
@alifaditya7787
@alifaditya7787 2 жыл бұрын
thankyou sir, your vid really helped me, it worked on my case
@somasekharkudamala1643
@somasekharkudamala1643 2 жыл бұрын
Thank you, Proper explanation. Great work
@outhide4715
@outhide4715 Жыл бұрын
God bless you bro, keep up the good work
@gamecast4432
@gamecast4432 Жыл бұрын
Dude, there's a much easier way. const searchSentence = value.trim().toLowerCase() const result = products.filter(val => val.productName.toLowerCase().includes(searchSentence)
@stever2507
@stever2507 Жыл бұрын
where do you put these 2 lines, what do they do, and what do they replace?
@nurudeenmohammedhuloty6554
@nurudeenmohammedhuloty6554 Жыл бұрын
Please mine is still not working. Where I replaced document with storeitems const pname is saying HTMLElement | null
@edwinklost3886
@edwinklost3886 2 жыл бұрын
This is nice🔥🔥🍻🍻I'm Glade I came to this video 🔥🔥🔥very nice n clean code
@Tech2etc
@Tech2etc 2 жыл бұрын
You're very welcome! More projects are coming soon. Please share this project on your social media. It will help us. Thanks.
@TheIndianOutcast
@TheIndianOutcast 4 ай бұрын
Great work.
@tammammohammed4442
@tammammohammed4442 4 ай бұрын
Thank you for all the effort. I have a problem and it seems that it is a repeated problem whenever I write a js code. The js part of the project does not work. What could be the problem. Note: I installed node.js and I put the path in the system variable but still it does not work.
@Anonymous-jx4zp
@Anonymous-jx4zp 3 жыл бұрын
i like the way you explain
@Deksii
@Deksii 3 ай бұрын
Great job 10q sir
@petersabraham7423
@petersabraham7423 2 жыл бұрын
Nicely done. Thank you. Keep up with the good work
@Tech2etc
@Tech2etc 2 жыл бұрын
Your most welcome. Please share this project on your social media. Will appreciate that.
@nurudeenmohammedhuloty6554
@nurudeenmohammedhuloty6554 Жыл бұрын
Thanks for this video, but mine doesn’t work even I copied the code exactly. Const storeitems: HTMLElement | null. This is what I get at the declaration of the pname.
@shoriful732
@shoriful732 Жыл бұрын
Can you make it so the box and the products only appears when I click on the search box
@21-himanshujadav83
@21-himanshujadav83 Жыл бұрын
Did u get the solution? If yes plz share it
@Meshack_Locho
@Meshack_Locho 9 ай бұрын
Hey mahn, this is amazing thank you so much
@Tech2etc
@Tech2etc 9 ай бұрын
Your most welcome 😇
@somebody1222
@somebody1222 10 ай бұрын
Great Work!
@delightstv5273
@delightstv5273 2 жыл бұрын
tried it..it didnt work...checked for errors no errors..and yet not working
@maliksalah6830
@maliksalah6830 Жыл бұрын
This was awesome!!! Thansk!!!!
@leehom2442
@leehom2442 Жыл бұрын
Will it bring you to another page after you click the selection?
@BlackMetalPromo666
@BlackMetalPromo666 2 жыл бұрын
emcommerce.js:3 Uncaught TypeError: document.getElementsById is not a function at search (emcommerce.js:3:33) at HTMLInputElement.onkeyup what to do?
@umardarazofficials3529
@umardarazofficials3529 Жыл бұрын
It's not working?
@harpit5905
@harpit5905 Жыл бұрын
Good voice. Relevant.
@rohan67.
@rohan67. Жыл бұрын
superb explination
@deepayubipinchandraninama
@deepayubipinchandraninama Жыл бұрын
I was challanged for an hour to decode an error and guess what?..i found out that I wrote the wrong spelling of character under .
@anisslharchichi604
@anisslharchichi604 2 жыл бұрын
This helped so much thank you.
@Tech2etc
@Tech2etc 2 жыл бұрын
More projects are coming soon. Please share this project on your social media. It will help us. Thanks.
@syedimran5729
@syedimran5729 Жыл бұрын
Thank you sooo much bro ❤
@trapx6349
@trapx6349 10 ай бұрын
Broooo, thankyou so much❤
@mmclw
@mmclw 2 жыл бұрын
TYYYYYYYYYYY SOOOOOOOOO MUCH It worked and it was also kinda easy to understand
@Tech2etc
@Tech2etc 2 жыл бұрын
Thank you
@arin1972
@arin1972 Жыл бұрын
good! very good expanation
@slimfit9605
@slimfit9605 Жыл бұрын
hi, how can i do this with select box buttons? example: "first select box: city , second select box: district, third select box: categories"
@JNS_NLS
@JNS_NLS 6 ай бұрын
Hey bro, I tried this out and everything worked except for the objects moving upwards to the search bar itself after searching for them. They usually have a weird margin (i think thats the problem) but I cant find the trigger to my problem. Do you know how to solve this problem?
@Movies-rl3ti
@Movies-rl3ti Жыл бұрын
everyone can search with keyword " how to search/ filter list W3School". This code is similar.
@sandipgiri5295
@sandipgiri5295 Жыл бұрын
Really appreciate ❤
@karimbaghdadi1346
@karimbaghdadi1346 2 жыл бұрын
Good tutorial ! But the search box isn't working , do you have any idea ? all the code is written in the right way
@majemiteeguonor
@majemiteeguonor 2 жыл бұрын
Am having the same problem here,plz help
@codingwithankit7619
@codingwithankit7619 2 жыл бұрын
Same problem bro
@delightstv5273
@delightstv5273 2 жыл бұрын
same issue too...and there is no error
@akilprakash9715
@akilprakash9715 Жыл бұрын
It's working. Check whether I'd name in html matches with js
@rommelramos5573
@rommelramos5573 3 жыл бұрын
How it apply in e commerce? I want to create an search bar in the nav bar but the pictures is hidden.
@yousefmiri7045
@yousefmiri7045 Жыл бұрын
Thanks , It's work
@adamirulislam612
@adamirulislam612 2 жыл бұрын
I don't know what's wrong wit me. I can't fix my problem. my code isn't running.
@A3_Paradox
@A3_Paradox Жыл бұрын
Maa Sha Allah vaiia, Aapni ki Bangladeshi?
@abumursad
@abumursad 2 жыл бұрын
Kindly go for JavaScript dedicated playlist....
@aftabsaleem2670
@aftabsaleem2670 2 жыл бұрын
search box not working
@Bharatiyath
@Bharatiyath 3 ай бұрын
Dude it is showing toUpperCase() undefined what to do...?
@wolf-splay4956
@wolf-splay4956 Жыл бұрын
Bro I love You 😍
@vidyaabhimaan
@vidyaabhimaan 2 жыл бұрын
Tried checking the code word for word, doesn't work.
@Tech2etc
@Tech2etc 2 жыл бұрын
Let me know the issue you are facing. Will try to help.
@majemiteeguonor
@majemiteeguonor 2 жыл бұрын
Am facing the same problem
@DeviDevi-yr2sv
@DeviDevi-yr2sv 2 жыл бұрын
@@Tech2etc same issue I am also facing
@jargonlab4226
@jargonlab4226 2 жыл бұрын
same here
@delightstv5273
@delightstv5273 2 жыл бұрын
@@Tech2etc same issue sirr.. am not getting any error still not working
@thesiddiqui7
@thesiddiqui7 2 жыл бұрын
sir mere me ye work Kyun nhi kr rha na koi error show kr rha hai console me jab ki script show kr rha plz help me!!
@JitendraYadav-by7mn
@JitendraYadav-by7mn 2 жыл бұрын
same bro
@amithbiswas3693
@amithbiswas3693 Жыл бұрын
Thanks 🎉
@codingwithankit7619
@codingwithankit7619 2 жыл бұрын
Search Box is not working.
@cheahchunwei6181
@cheahchunwei6181 2 жыл бұрын
Thank you, perfect video! But what script should I put if also want to search h3 value?
@teamofwinter8128
@teamofwinter8128 2 жыл бұрын
same process but replace h2 with h3 lol
@CN_Entertainmentt
@CN_Entertainmentt Жыл бұрын
@@teamofwinter8128 bhai ye < -1 ka kya matlab h js me
@CN_Entertainmentt
@CN_Entertainmentt Жыл бұрын
sorry > -1 ka
@mark7322
@mark7322 Жыл бұрын
hi~ What about adding more search items instead of only one item?
@val_en_tine
@val_en_tine 10 ай бұрын
Thank you so much 🥹
@gwolojulius4135
@gwolojulius4135 8 ай бұрын
Great job! but you declared a variable 'storeitems' and it was not used anywhere.
@vikrambam1184
@vikrambam1184 2 жыл бұрын
what is the use of [0] . you write in line no. 8
@tenc6491
@tenc6491 2 жыл бұрын
indexOf() returns the position of a specified value in an array. To create For Loop, declaring var i=0 or var x=0 is a must. var i=0 was used here to set a variable before the loop starts. let match = product[i].getElementsByTagName("h2")[0]; ----This was your question---- i here means i number of products (its an assumption) [0] here means he is trying to access the first element of the product and in javascript, 0th product means 1st product. example from W3Schools: const fruits = ["Banana", "Orange", "Apple", "Mango"]; Question: Find the index of Banana. Answer: let index = fruits.indexOf("Banana"); console.log(index); It will log 0 because Banana sits in the 1st position in this array, which is considered as the 0th position in javascript! Counts in JavaScript starts from 0 1 2 3 4 5 etc. Banana 0 Orange 1 Apple 2 Mango 3
@21-himanshujadav83
@21-himanshujadav83 Жыл бұрын
how do i initially hide all the products and let them show when some text is written in search bar?
@meghanandwakpanjar2011
@meghanandwakpanjar2011 Жыл бұрын
yes its working
@Maywebmst
@Maywebmst 10 ай бұрын
pls can you make a video of calculating total price in cart item using javascript
@aligh9983
@aligh9983 10 ай бұрын
it was really useful for and i learn a lot spcially css and html and i would to learn javascript with if it is possible
@kaungkinzone2448
@kaungkinzone2448 Жыл бұрын
Thanks❤
@my_codingchannel7479
@my_codingchannel7479 Жыл бұрын
now an input interface would complete this project, it could be adapted to other applications
@alaslife21
@alaslife21 Жыл бұрын
Thank you sir I'm having problem in my music player search bar
@SatyamX635
@SatyamX635 2 жыл бұрын
Great
@Tech2etc
@Tech2etc 2 жыл бұрын
Thanks
@romafolsa1678
@romafolsa1678 2 жыл бұрын
excellent but let me ask you one question what is the d/ce between software enginner and computer science
@Tech2etc
@Tech2etc 2 жыл бұрын
"Software engineering is the application of engineering principles to computer hardware and software, usually to solve real-world problems. Computer science is the application of the scientific method to computer software. CS is broader and more abstract and is used for theoretical applications than practical ones" - careerkarma. Please search this question in google. You will get a lot of helpful articles regarding this topic.
@Phenix141
@Phenix141 8 ай бұрын
thanks broo
@francuskisir7180
@francuskisir7180 Жыл бұрын
Can i make with this search engine for buttons
@francuskisir7180
@francuskisir7180 Жыл бұрын
Its for searching txt documents
@studywithroman1997
@studywithroman1997 Жыл бұрын
thank you boss
@Anonymous-mj4zw
@Anonymous-mj4zw Жыл бұрын
Does it work without hosting website
@DoLittleWithPalash
@DoLittleWithPalash 2 жыл бұрын
a great tutorial
@Tech2etc
@Tech2etc 2 жыл бұрын
Thanks bro
@deepak8586
@deepak8586 3 жыл бұрын
Amazing!!
@Tech2etc
@Tech2etc 3 жыл бұрын
Thanks
@DM-fr3ve
@DM-fr3ve 2 жыл бұрын
Hello! Thanks for the video! I am having some trouble getting it to work. Can I show you my code somehow please? I validated the HTML, CSS and JS with online validators and I have no errors. Thanks in advance!
@Tech2etc
@Tech2etc 2 жыл бұрын
Please join our discord.
@CN_Entertainmentt
@CN_Entertainmentt Жыл бұрын
@@Tech2etc sir how to join
@ManuelBarca4
@ManuelBarca4 2 жыл бұрын
Hey, nice video, it help me a lot. One question, if i want to hide the products until the user become to type the name of them, and that moment they start to appear, how can i do it?
@ManuelBarca4
@ManuelBarca4 2 жыл бұрын
I resolve to do: Create a new variable inside search() that is: const is-visible = document.getElementById("product-list") And then, inside the second if, i added to the product[i].style.display = "";: is-visible.classList.remove('overflow-hidden'); is-visible.classList.add('overflow-visible'); Because i use bootstrap 5, but i have an issue. When i delete the letters in the search box, the products doesnt disapear, they all stuck in the screen. Any suggestions?
@abdulraheem-522
@abdulraheem-522 Жыл бұрын
is there any way i can hide the products but when someone clicks the search bar then products come? please any one tell me
@jargonlab4226
@jargonlab4226 2 жыл бұрын
Subscribed
@deepak625
@deepak625 3 жыл бұрын
Python videos pls 😅😅
@ABHISHEKKUMAR-wt1pw
@ABHISHEKKUMAR-wt1pw 2 жыл бұрын
Sir plz make more video on javascript
@Tech2etc
@Tech2etc 2 жыл бұрын
Sure bro, i will
@hyd_property_explorer
@hyd_property_explorer 2 жыл бұрын
hi bro how to add images into image file with what extension
@premobratabiswas1657
@premobratabiswas1657 Жыл бұрын
exactly bro, I have this same problem, when I'm inserting my own images, it is not working, as his
@revelationtrain7518
@revelationtrain7518 2 жыл бұрын
Are you using Android studio Sir?
@Tech2etc
@Tech2etc 2 жыл бұрын
Vs code
@revelationtrain7518
@revelationtrain7518 2 жыл бұрын
@@Tech2etc alright thanks , well-done . I just subscribed
@julio5434
@julio5434 3 жыл бұрын
💗💗💗
@anilreddy8596
@anilreddy8596 Ай бұрын
What is use of ""
Build this JS calculator in 15 minutes! 🖩
15:20
Bro Code
Рет қаралды 669 М.
How To Create A Search Bar In JavaScript
14:28
Web Dev Simplified
Рет қаралды 421 М.
I thought one thing and the truth is something else 😂
00:34
عائلة ابو رعد Abo Raad family
Рет қаралды 11 МЛН
А я думаю что за звук такой знакомый? 😂😂😂
00:15
Денис Кукояка
Рет қаралды 5 МЛН
Most Beginner React Developers Do This Wrong
13:47
Web Dev Simplified
Рет қаралды 236 М.
JavaScript Project | Image Search App With JavaScript API
48:19
Tech2 etc
Рет қаралды 232 М.
This is the Only Right Way to Write React clean-code - SOLID
18:23
JavaScript Search Bar
14:57
James Q Quick
Рет қаралды 169 М.
I thought one thing and the truth is something else 😂
00:34
عائلة ابو رعد Abo Raad family
Рет қаралды 11 МЛН