Search bar js

How do i get results from my search bar
No description
129 Replies
RIZE Hobberz
RIZE HobberzOP7mo 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>
ἔρως
ἔρως7mo ago
that question is the same as asking "how do i create the universe from scratch so i can amke an omelette?"
RIZE Hobberz
RIZE HobberzOP7mo 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
RIZE Hobberz
RIZE HobberzOP7mo ago
No description
RIZE Hobberz
RIZE HobberzOP7mo 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
ἔρως
ἔρως7mo ago
are you building it from scratch?
RIZE Hobberz
RIZE HobberzOP7mo ago
yes ive only got the html and css of the search bar
ἔρως
ἔρως7mo 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 ...
RIZE Hobberz
RIZE HobberzOP7mo 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
ἔρως
ἔρως7mo ago
i know what you mean implementing search is hard where are the suggestions coming from? what are you trying to search for?
Jochem
Jochem7mo 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
RIZE Hobberz
RIZE HobberzOP7mo ago
a file
Jochem
Jochem7mo ago
both are honestly a bit too broad to answer sensibly here
ἔρως
ἔρως7mo ago
specially making everything from scratch
RIZE Hobberz
RIZE HobberzOP7mo ago
I just want like a list of artists song artists html pages and u search them
Jochem
Jochem7mo ago
you can't put "just" in front of something and make it easy...
RIZE Hobberz
RIZE HobberzOP7mo ago
habit sorry
ἔρως
ἔρως7mo ago
what's the purpose of the search?
RIZE Hobberz
RIZE HobberzOP7mo ago
and then it takes u to that page
ἔρως
ἔρως7mo ago
okay, do you have a list of pages?
RIZE Hobberz
RIZE HobberzOP7mo 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
ἔρως
ἔρως7mo ago
for what you want, you're going to be bitting more than you can chew unless you have an api
RIZE Hobberz
RIZE HobberzOP7mo ago
what does that even mean i dont I have a folder called artists with a bunch of html files for the artists
ἔρως
ἔρως7mo 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
Jochem7mo ago
that this is a hard problem that's not easily solved
ἔρως
ἔρως7mo ago
you have to have the information somewhere
RIZE Hobberz
RIZE HobberzOP7mo ago
oh I know and I hate search bars i always just end up scrapping making them but i need to for this project
ἔρως
ἔρως7mo ago
how many artists will you have?
RIZE Hobberz
RIZE HobberzOP7mo ago
what information? im going to add quite alot
Jochem
Jochem7mo ago
Do you have somewhere to run code serverside, or does this have to be client side only?
RIZE Hobberz
RIZE HobberzOP7mo ago
i think for now only a few
ἔρως
ἔρως7mo ago
is "a lot" just 50? or 50 million?
RIZE Hobberz
RIZE HobberzOP7mo ago
ive only got vscode just 50 gonna start off small though with like 10 then build it up
Jochem
Jochem7mo ago
that's not really an answer. Where are you deploying your code when this is done?
ἔρως
ἔρως7mo ago
just to develop, you can have an array with the names of the artists, and show suggestions based on that array
RIZE Hobberz
RIZE HobberzOP7mo ago
probably some free hosting website for now like netlify then eventually pay
ἔρως
ἔρως7mo ago
i wouldn't touch netlify
RIZE Hobberz
RIZE HobberzOP7mo ago
why not? ive used it for all my stuff yeah idek how to do that i was thinking it was something like that
ἔρως
ἔρως7mo ago
didn't you hear the dude that was charged $104k because someone made bots that downloaded an mp3 on his site?
Jochem
Jochem7mo 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
RIZE Hobberz
RIZE HobberzOP7mo ago
no? could i possibly have help with doing that?
ἔρως
ἔρως7mo ago
it was all over the place
Jochem
Jochem7mo ago
not from scratch probably, no
ἔρως
ἔρως7mo ago
short of writting it for you, not really
RIZE Hobberz
RIZE HobberzOP7mo ago
im not saying that i just havent used javascript so idk how arrays work
Jochem
Jochem7mo ago
then you'll have to learn javascript
ἔρως
ἔρως7mo ago
^
Jochem
Jochem7mo ago
teaching you javascript is out of scope for a question here
ἔρως
ἔρως7mo ago
and search is VERY VERY VERY VERY hard to implement
Jochem
Jochem7mo ago
you can go to https://javascript.info and learn about event handlers, forms, and data structures like arrays, then go from there
ἔρως
ἔρως7mo 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
RIZE Hobberz
RIZE HobberzOP7mo ago
No description
RIZE Hobberz
RIZE HobberzOP7mo ago
like this?
ἔρως
ἔρως7mo ago
that is a start, yes
RIZE Hobberz
RIZE HobberzOP7mo ago
cool shall i just keep listing artists for now lol
Jochem
Jochem7mo ago
I'd park this project for a few days and focus on learning the basics of javascript
RIZE Hobberz
RIZE HobberzOP7mo ago
damn ima give it a go
ἔρως
ἔρως7mo ago
i would say a month, so you get familiar with everything you need
Jochem
Jochem7mo ago
this tbh yeah
ἔρως
ἔρως7mo ago
and even then, YOU WILL STRUGGLE im not joking, you will struggle im telling you, search is hard
Jochem
Jochem7mo 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
ἔρως
ἔρως7mo 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
Jochem7mo ago
no one is going to search for uicë though, but whatever
ἔρως
ἔρως7mo 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
Jochem7mo 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
RIZE Hobberz
RIZE HobberzOP7mo ago
will
document.getElementById('mysearch').value
document.getElementById('mysearch').value
fetch what the user is inputing?
ἔρως
ἔρως7mo ago
yes, but depends on the exact context, that may or may not be sub-optimal
Jochem
Jochem7mo ago
and it'll do it once, not for each keystroke
RIZE Hobberz
RIZE HobberzOP7mo ago
oh right uh
ἔρως
ἔρως7mo ago
im sorry, but you're not at the level (yet) to implement this
Jochem
Jochem7mo ago
we're not going to handhold you through you googling/chatgpt'ing this entire thing together. Spend some time to learn the basics
RIZE Hobberz
RIZE HobberzOP7mo ago
im way better at python tbh
ἔρως
ἔρως7mo 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
RIZE Hobberz
RIZE HobberzOP7mo ago
yeah i wanna get this done lol i needa slow down but then i get bored
ἔρως
ἔρως7mo ago
it's not a slowdown
RIZE Hobberz
RIZE HobberzOP7mo ago
No description
ἔρως
ἔρως7mo ago
you just don't have tthe basics
RIZE Hobberz
RIZE HobberzOP7mo ago
im tryna code a music website but yk
Jochem
Jochem7mo ago
you cannot do that without knowing JavaScript if you're good at python like you say, it should be easy enough to learn
ἔρως
ἔρως7mo ago
and honestly, if i were you, i would start with something simpler
RIZE Hobberz
RIZE HobberzOP7mo ago
i have coded other websites but they were purely html and css
ἔρως
ἔρως7mo ago
then go to those websites and improve them with javascript
RIZE Hobberz
RIZE HobberzOP7mo ago
No description
ἔρως
ἔρως7mo ago
or just make a new one
Jochem
Jochem7mo 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.
RIZE Hobberz
RIZE HobberzOP7mo ago
what the music websites menu? yeah ik like the loging out and in and the settings
ἔρως
ἔρως7mo ago
logging in and out can be done without js as well as settings
Jochem
Jochem7mo ago
and charts and liked songs (re: needing backend)
ἔρως
ἔρως7mo ago
but making the menu work
RIZE Hobberz
RIZE HobberzOP7mo ago
was thinking on making a light mode and dark mode option in the settings
ἔρως
ἔρως7mo ago
the search
RIZE Hobberz
RIZE HobberzOP7mo ago
oh ik
ἔρως
ἔρως7mo ago
this project is too much for you, at this point
RIZE Hobberz
RIZE HobberzOP7mo ago
I absolutely hate how it needs me to have search for the music website
ἔρως
ἔρως7mo ago
you can implement the search purely on the server side
RIZE Hobberz
RIZE HobberzOP7mo 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
ἔρως
ἔρως7mo ago
but you won't have search suggestions
RIZE Hobberz
RIZE HobberzOP7mo ago
wait fr?
ἔρως
ἔρως7mo ago
yeah, but needs a backend a server
RIZE Hobberz
RIZE HobberzOP7mo ago
oh yeah ik a database isnt it called?
ἔρως
ἔρως7mo 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
RIZE Hobberz
RIZE HobberzOP7mo ago
oh sorry i didnt realise i thought thats all a server was the database
Jochem
Jochem7mo ago
you need to do some reading on how webdevelopment works, dude
ἔρως
ἔρως7mo ago
i change my mind, you will need 3-4 months
Jochem
Jochem7mo ago
asking us to rehash something there's a thousand excellent youtube videos and articles on isn't cool
RIZE Hobberz
RIZE HobberzOP7mo ago
😂
ἔρως
ἔρως7mo ago
you said you know python, so, i though you were familiar with backend development
Jochem
Jochem7mo 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
RIZE Hobberz
RIZE HobberzOP7mo 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
ἔρως
ἔρως7mo ago
because you're trying to do too much
Jochem
Jochem7mo ago
you will not be able to learn this without more commitment than that
ἔρως
ἔρως7mo ago
baby steps, learn the basics, do something simple
RIZE Hobberz
RIZE HobberzOP7mo ago
my bad
ἔρως
ἔρως7mo ago
do what jochem said, and learn javascript first backend will be a whole can of worms ...
RIZE Hobberz
RIZE HobberzOP7mo ago
i hate backend but i gotta learn it
ἔρως
ἔρως7mo ago
you know python, don't you?
RIZE Hobberz
RIZE HobberzOP7mo 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
Jochem7mo ago
a day?
ἔρως
ἔρως7mo ago
but you need javascript, unless you skip all the interactivity and just do everything server-side
RIZE Hobberz
RIZE HobberzOP7mo ago
yeah
Jochem
Jochem7mo ago
you realize people have lives, right?
ἔρως
ἔρως7mo ago
also, a day isn't that long
RIZE Hobberz
RIZE HobberzOP7mo 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
ἔρως
ἔρως7mo ago
you will need javascript for that
RIZE Hobberz
RIZE HobberzOP7mo ago
lmao
ἔρως
ἔρως7mo ago
and depends on how the settings work, you need backend as well so, just learn javascript until "the dude" answers
RIZE Hobberz
RIZE HobberzOP7mo ago
ok then cheers
ἔρως
ἔρως7mo ago
you can try this again when you have a proper grasp on javascript's basic concepts
RIZE Hobberz
RIZE HobberzOP7mo ago
ok
Want results from more Discord servers?
Add your server