Search bar js

How do i get results from my search bar
No description
129 Replies
Hobberz
HobberzOP2y ago
<div class="main">
<div class="content">
<div class="search-content">
<form>
<div class="search">
<span class="search-icon material-symbols-outlined">search</span>
<input type="search" class="search-input" placeholder="search..." id="mysearch">
<span class="clear" onclick="document.getElementById('mysearch').value = ''"></span>

</div>
</form>
</div>
</div>
</div>
<div class="main">
<div class="content">
<div class="search-content">
<form>
<div class="search">
<span class="search-icon material-symbols-outlined">search</span>
<input type="search" class="search-input" placeholder="search..." id="mysearch">
<span class="clear" onclick="document.getElementById('mysearch').value = ''"></span>

</div>
</form>
</div>
</div>
</div>
ἔρως
ἔρως2y ago
that question is the same as asking "how do i create the universe from scratch so i can amke an omelette?"
Hobberz
HobberzOP2y ago
how idk what to ask i need help having results so when u search a certain artist it comes up with a page with their songs on
Hobberz
HobberzOP2y ago
No description
Hobberz
HobberzOP2y ago
i want it to show results a bit like this but only certain results not everything so if u say like r ren would show underneath
ἔρως
ἔρως2y ago
are you building it from scratch?
Hobberz
HobberzOP2y ago
yes ive only got the html and css of the search bar
ἔρως
ἔρως2y ago
well, the easiest option is to have a list that shows with results from the server or you have to have a list of results to show there already it depends on what you want how you want it to work, how you expect the results to function ...
Hobberz
HobberzOP2y ago
idk how to explain a bit like searching on spotify i just want to search: r and there be a bunch of search suggestions under like ren ect and if i search J juice world wrld
ἔρως
ἔρως2y ago
i know what you mean implementing search is hard where are the suggestions coming from? what are you trying to search for?
Jochem
Jochem2y ago
you can do it two ways: - have code on a server handle the search and display the result you get from the server - have the entire list in javascript and HTML, and implement the search in the frontend
Hobberz
HobberzOP2y ago
a file
Jochem
Jochem2y ago
both are honestly a bit too broad to answer sensibly here
ἔρως
ἔρως2y ago
specially making everything from scratch
Hobberz
HobberzOP2y ago
I just want like a list of artists song artists html pages and u search them
Jochem
Jochem2y ago
you can't put "just" in front of something and make it easy...
Hobberz
HobberzOP2y ago
habit sorry
ἔρως
ἔρως2y ago
what's the purpose of the search?
Hobberz
HobberzOP2y ago
and then it takes u to that page
ἔρως
ἔρως2y ago
okay, do you have a list of pages?
Hobberz
HobberzOP2y ago
with the artists yes now i need to have a search suggestion thing so when u search re then ren shows up and when u click it it takes u to rens apge page* am i being confusing? sorry
ἔρως
ἔρως2y ago
for what you want, you're going to be bitting more than you can chew unless you have an api
Hobberz
HobberzOP2y ago
what does that even mean i dont I have a folder called artists with a bunch of html files for the artists
ἔρως
ἔρως2y ago
the generic steps: 1- receive user input - debounce it or you burn the server/api 2- wait for the server to answer 3- show a list under the input
Jochem
Jochem2y ago
that this is a hard problem that's not easily solved
ἔρως
ἔρως2y ago
you have to have the information somewhere
Hobberz
HobberzOP2y ago
oh I know and I hate search bars i always just end up scrapping making them but i need to for this project
ἔρως
ἔρως2y ago
how many artists will you have?
Hobberz
HobberzOP2y ago
what information? im going to add quite alot
Jochem
Jochem2y ago
Do you have somewhere to run code serverside, or does this have to be client side only?
Hobberz
HobberzOP2y ago
i think for now only a few
ἔρως
ἔρως2y ago
is "a lot" just 50? or 50 million?
Hobberz
HobberzOP2y ago
ive only got vscode just 50 gonna start off small though with like 10 then build it up
Jochem
Jochem2y ago
that's not really an answer. Where are you deploying your code when this is done?
ἔρως
ἔρως2y ago
just to develop, you can have an array with the names of the artists, and show suggestions based on that array
Hobberz
HobberzOP2y ago
probably some free hosting website for now like netlify then eventually pay
ἔρως
ἔρως2y ago
i wouldn't touch netlify
Hobberz
HobberzOP2y ago
why not? ive used it for all my stuff yeah idek how to do that i was thinking it was something like that
ἔρως
ἔρως2y ago
didn't you hear the dude that was charged $104k because someone made bots that downloaded an mp3 on his site?
Jochem
Jochem2y ago
then you'll probably be best off putting the whole list of artists in javascript in an array, and searching through that when someone enters text in the search bar. You can use an event listener to listen for people typing in the text box
Hobberz
HobberzOP2y ago
no? could i possibly have help with doing that?
ἔρως
ἔρως2y ago
it was all over the place
Jochem
Jochem2y ago
not from scratch probably, no
ἔρως
ἔρως2y ago
short of writting it for you, not really
Hobberz
HobberzOP2y ago
im not saying that i just havent used javascript so idk how arrays work
Jochem
Jochem2y ago
then you'll have to learn javascript
ἔρως
ἔρως2y ago
^
Jochem
Jochem2y ago
teaching you javascript is out of scope for a question here
ἔρως
ἔρως2y ago
and search is VERY VERY VERY VERY hard to implement
Jochem
Jochem2y ago
you can go to https://javascript.info and learn about event handlers, forms, and data structures like arrays, then go from there
ἔρως
ἔρως2y ago
"a test" <-- just this search has to many different interpretations and expectations that will explode my mind just explaining it all but yes, learn basic js first i would say that search is an intermediate difficulty challenge
Hobberz
HobberzOP2y ago
No description
Hobberz
HobberzOP2y ago
like this?
ἔρως
ἔρως2y ago
that is a start, yes
Hobberz
HobberzOP2y ago
cool shall i just keep listing artists for now lol
Jochem
Jochem2y ago
I'd park this project for a few days and focus on learning the basics of javascript
Hobberz
HobberzOP2y ago
damn ima give it a go
ἔρως
ἔρως2y ago
i would say a month, so you get familiar with everything you need
Jochem
Jochem2y ago
this tbh yeah
ἔρως
ἔρως2y ago
and even then, YOU WILL STRUGGLE im not joking, you will struggle im telling you, search is hard
Jochem
Jochem2y ago
a simple string search isn't too bad, it's hard if you start splitting terms and doing fuzzy matching but if you're okay with 'uicew' returning juiceworld and 'juceworld' not, it's not too complicated
ἔρως
ἔρως2y ago
don't forget to normalize the strings, to remove all accents so if you search for 'üíce" it returns the same as "uice"
Jochem
Jochem2y ago
no one is going to search for uicë though, but whatever
ἔρως
ἔρως2y ago
and when you split terms, you have to decide how the terms are interpreted no, but an artist called "andré chaves" has to show when you search for "andre"
Jochem
Jochem2y ago
learn JS basics, this is too broad of a question. If you have questions about Javascript concepts, please make a post in the help forum without first posting in general, and without announcing that you made a post in general, and be as descriptive as you can be
Hobberz
HobberzOP2y ago
will
document.getElementById('mysearch').value
document.getElementById('mysearch').value
fetch what the user is inputing?
ἔρως
ἔρως2y ago
yes, but depends on the exact context, that may or may not be sub-optimal
Jochem
Jochem2y ago
and it'll do it once, not for each keystroke
Hobberz
HobberzOP2y ago
oh right uh
ἔρως
ἔρως2y ago
im sorry, but you're not at the level (yet) to implement this
Jochem
Jochem2y ago
we're not going to handhold you through you googling/chatgpt'ing this entire thing together. Spend some time to learn the basics
Hobberz
HobberzOP2y ago
im way better at python tbh
ἔρως
ἔρως2y ago
yeah, but you're trying to do something completely different from python and instead of taking baby steps, you're trying to eat the cake before you even have an oven to bake it
Hobberz
HobberzOP2y ago
yeah i wanna get this done lol i needa slow down but then i get bored
ἔρως
ἔρως2y ago
it's not a slowdown
Hobberz
HobberzOP2y ago
No description
ἔρως
ἔρως2y ago
you just don't have tthe basics
Hobberz
HobberzOP2y ago
im tryna code a music website but yk
Jochem
Jochem2y ago
you cannot do that without knowing JavaScript if you're good at python like you say, it should be easy enough to learn
ἔρως
ἔρως2y ago
and honestly, if i were you, i would start with something simpler
Hobberz
HobberzOP2y ago
i have coded other websites but they were purely html and css
ἔρως
ἔρως2y ago
then go to those websites and improve them with javascript
Hobberz
HobberzOP2y ago
No description
ἔρως
ἔρως2y ago
or just make a new one
Jochem
Jochem2y ago
like, just on that little menu there, there's several features that require a backend, and you'll need a lot of interactivity that will need frontend javascript you cannot build this website without javascript knowledge. It is impossible.
Hobberz
HobberzOP2y ago
what the music websites menu? yeah ik like the loging out and in and the settings
ἔρως
ἔρως2y ago
logging in and out can be done without js as well as settings
Jochem
Jochem2y ago
and charts and liked songs (re: needing backend)
ἔρως
ἔρως2y ago
but making the menu work
Hobberz
HobberzOP2y ago
was thinking on making a light mode and dark mode option in the settings
ἔρως
ἔρως2y ago
the search
Hobberz
HobberzOP2y ago
oh ik
ἔρως
ἔρως2y ago
this project is too much for you, at this point
Hobberz
HobberzOP2y ago
I absolutely hate how it needs me to have search for the music website
ἔρως
ἔρως2y ago
you can implement the search purely on the server side
Hobberz
HobberzOP2y ago
ik theres a guy meant to be helping me with it but he hasnt replied to me since i told him were gonna worm on it
ἔρως
ἔρως2y ago
but you won't have search suggestions
Hobberz
HobberzOP2y ago
wait fr?
ἔρως
ἔρως2y ago
yeah, but needs a backend a server
Hobberz
HobberzOP2y ago
oh yeah ik a database isnt it called?
ἔρως
ἔρως2y ago
not just a database but yes, it requires a database that's like me saying that we need a car, and you saying "oh, yeah, tyres and rims" it's an integral part that you will need, but isn't all
Hobberz
HobberzOP2y ago
oh sorry i didnt realise i thought thats all a server was the database
Jochem
Jochem2y ago
you need to do some reading on how webdevelopment works, dude
ἔρως
ἔρως2y ago
i change my mind, you will need 3-4 months
Jochem
Jochem2y ago
asking us to rehash something there's a thousand excellent youtube videos and articles on isn't cool
Hobberz
HobberzOP2y ago
😂
ἔρως
ἔρως2y ago
you said you know python, so, i though you were familiar with backend development
Jochem
Jochem2y ago
find a roadmap, read the site I linked you, google "how to build a full stack web application", read up on the difference between frontend and backend development, then go from there
Hobberz
HobberzOP2y ago
Yeah idk whats up with me i do like a few days of web dev then disapear for months then come bak i cant commit to anything
ἔρως
ἔρως2y ago
because you're trying to do too much
Jochem
Jochem2y ago
you will not be able to learn this without more commitment than that
ἔρως
ἔρως2y ago
baby steps, learn the basics, do something simple
Hobberz
HobberzOP2y ago
my bad
ἔρως
ἔρως2y ago
do what jochem said, and learn javascript first backend will be a whole can of worms ...
Hobberz
HobberzOP2y ago
i hate backend but i gotta learn it
ἔρως
ἔρως2y ago
you know python, don't you?
Hobberz
HobberzOP2y ago
not everything but yk i was meant to be doing all the front end on this website and the other dude was meant to do the backend but hes not replying to me and its been a day so yk
Jochem
Jochem2y ago
a day?
ἔρως
ἔρως2y ago
but you need javascript, unless you skip all the interactivity and just do everything server-side
Hobberz
HobberzOP2y ago
yeah
Jochem
Jochem2y ago
you realize people have lives, right?
ἔρως
ἔρως2y ago
also, a day isn't that long
Hobberz
HobberzOP2y ago
yeah my bad i might just work on the settings and have a light and dark mode i bet that requires a server aswell
ἔρως
ἔρως2y ago
you will need javascript for that
Hobberz
HobberzOP2y ago
lmao
ἔρως
ἔρως2y ago
and depends on how the settings work, you need backend as well so, just learn javascript until "the dude" answers
Hobberz
HobberzOP2y ago
ok then cheers
ἔρως
ἔρως2y ago
you can try this again when you have a proper grasp on javascript's basic concepts
Hobberz
HobberzOP2y ago
ok

Did you find this page helpful?