Search bar js

How do i get results from my search bar

RIZE Hobberz•17d 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>

ἔρως•17d ago

that question is the same as asking "how do i create the universe from scratch so i can amke an omelette?"

RIZE Hobberz•17d 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•17d 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

ἔρως•17d ago

are you building it from scratch?

RIZE Hobberz•17d ago

yes ive only got the html and css of the search bar

ἔρως•17d 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•17d 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

ἔρως•17d ago

i know what you mean implementing search is hard where are the suggestions coming from? what are you trying to search for?

Jochem•17d 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•17d ago

a file

Jochem•17d ago

both are honestly a bit too broad to answer sensibly here

ἔρως•17d ago

specially making everything from scratch

RIZE Hobberz•17d ago

I just want like a list of artists song artists html pages and u search them

Jochem•17d ago

you can't put "just" in front of something and make it easy...

RIZE Hobberz•17d ago

habit sorry

ἔρως•17d ago

what's the purpose of the search?

RIZE Hobberz•17d ago

and then it takes u to that page

ἔρως•17d ago

okay, do you have a list of pages?

RIZE Hobberz•17d 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

ἔρως•17d ago

for what you want, you're going to be bitting more than you can chew unless you have an api

RIZE Hobberz•17d ago

what does that even mean i dont I have a folder called artists with a bunch of html files for the artists

ἔρως•17d 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•17d ago

that this is a hard problem that's not easily solved

ἔρως•17d ago

you have to have the information somewhere

RIZE Hobberz•17d ago

oh I know and I hate search bars i always just end up scrapping making them but i need to for this project

ἔρως•17d ago

how many artists will you have?

RIZE Hobberz•17d ago

what information? im going to add quite alot

Jochem•17d ago

Do you have somewhere to run code serverside, or does this have to be client side only?

RIZE Hobberz•17d ago

i think for now only a few

ἔρως•17d ago

is "a lot" just 50? or 50 million?

RIZE Hobberz•17d ago

ive only got vscode just 50 gonna start off small though with like 10 then build it up

Jochem•17d ago

that's not really an answer. Where are you deploying your code when this is done?

ἔρως•17d ago

just to develop, you can have an array with the names of the artists, and show suggestions based on that array

RIZE Hobberz•17d ago

probably some free hosting website for now like netlify then eventually pay

ἔρως•17d ago

i wouldn't touch netlify

RIZE Hobberz•17d ago

why not? ive used it for all my stuff yeah idek how to do that i was thinking it was something like that

ἔρως•17d ago

didn't you hear the dude that was charged $104k because someone made bots that downloaded an mp3 on his site?

Jochem•17d 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•17d ago

no? could i possibly have help with doing that?

ἔρως•17d ago

it was all over the place

Jochem•17d ago

not from scratch probably, no

ἔρως•17d ago

short of writting it for you, not really

RIZE Hobberz•17d ago

im not saying that i just havent used javascript so idk how arrays work

Jochem•17d ago

then you'll have to learn javascript

ἔρως•17d ago

Jochem•17d ago

teaching you javascript is out of scope for a question here

ἔρως•17d ago

and search is VERY VERY VERY VERY hard to implement

Jochem•17d ago

you can go to https://javascript.info and learn about event handlers, forms, and data structures like arrays, then go from there

The Modern JavaScript Tutorial

ἔρως•17d 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•17d ago

like this?

ἔρως•17d ago

that is a start, yes

RIZE Hobberz•17d ago

cool shall i just keep listing artists for now lol

Jochem•17d ago

I'd park this project for a few days and focus on learning the basics of javascript

RIZE Hobberz•17d ago

damn ima give it a go

ἔρως•17d ago

i would say a month, so you get familiar with everything you need

Jochem•17d ago

this tbh yeah

ἔρως•17d ago

and even then, YOU WILL STRUGGLE im not joking, you will struggle im telling you, search is hard

Jochem•17d 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

ἔρως•17d 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•17d ago

no one is going to search for uicë though, but whatever

ἔρως•17d 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•17d 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•17d ago

will

document.getElementById('mysearch').value

document.getElementById('mysearch').value

fetch what the user is inputing?

ἔρως•17d ago

yes, but depends on the exact context, that may or may not be sub-optimal

Jochem•17d ago

and it'll do it once, not for each keystroke

RIZE Hobberz•17d ago

oh right uh

ἔρως•17d ago

im sorry, but you're not at the level (yet) to implement this

Jochem•17d 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•17d ago

im way better at python tbh

ἔρως•17d 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•17d ago

yeah i wanna get this done lol i needa slow down but then i get bored

ἔρως•17d ago

it's not a slowdown

RIZE Hobberz•17d ago

ἔρως•17d ago

you just don't have tthe basics

RIZE Hobberz•17d ago

im tryna code a music website but yk

Jochem•17d ago

you cannot do that without knowing JavaScript if you're good at python like you say, it should be easy enough to learn

ἔρως•17d ago

and honestly, if i were you, i would start with something simpler

RIZE Hobberz•17d ago

i have coded other websites but they were purely html and css

ἔρως•17d ago

then go to those websites and improve them with javascript

RIZE Hobberz•17d ago

ἔρως•17d ago

or just make a new one

Jochem•17d 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•17d ago

what the music websites menu? yeah ik like the loging out and in and the settings

ἔρως•17d ago

logging in and out can be done without js as well as settings

Jochem•17d ago

and charts and liked songs (re: needing backend)

ἔρως•17d ago

but making the menu work

RIZE Hobberz•17d ago

was thinking on making a light mode and dark mode option in the settings

ἔρως•17d ago

the search

RIZE Hobberz•17d ago

oh ik

ἔρως•17d ago

this project is too much for you, at this point

RIZE Hobberz•17d ago

I absolutely hate how it needs me to have search for the music website

ἔρως•17d ago

you can implement the search purely on the server side

RIZE Hobberz•17d 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

ἔρως•17d ago

but you won't have search suggestions

RIZE Hobberz•17d ago

wait fr?

ἔρως•17d ago

yeah, but needs a backend a server

RIZE Hobberz•17d ago

oh yeah ik a database isnt it called?

ἔρως•17d 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•17d ago

oh sorry i didnt realise i thought thats all a server was the database

Jochem•17d ago

you need to do some reading on how webdevelopment works, dude

ἔρως•17d ago

i change my mind, you will need 3-4 months

Jochem•17d ago

asking us to rehash something there's a thousand excellent youtube videos and articles on isn't cool

RIZE Hobberz•17d ago

😂

ἔρως•17d ago

you said you know python, so, i though you were familiar with backend development

Jochem•17d 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•17d 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

ἔρως•17d ago

because you're trying to do too much

Jochem•17d ago

you will not be able to learn this without more commitment than that

ἔρως•17d ago

baby steps, learn the basics, do something simple

RIZE Hobberz•17d ago

my bad

ἔρως•17d ago

do what jochem said, and learn javascript first backend will be a whole can of worms ...

RIZE Hobberz•17d ago

i hate backend but i gotta learn it

ἔρως•17d ago

you know python, don't you?

RIZE Hobberz•17d 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•17d ago

a day?

ἔρως•17d ago

but you need javascript, unless you skip all the interactivity and just do everything server-side

RIZE Hobberz•17d ago

yeah

Jochem•17d ago

you realize people have lives, right?

ἔρως•17d ago

also, a day isn't that long

RIZE Hobberz•17d 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

ἔρως•17d ago

you will need javascript for that

RIZE Hobberz•17d ago

lmao

ἔρως•17d ago

and depends on how the settings work, you need backend as well so, just learn javascript until "the dude" answers

RIZE Hobberz•17d ago

ok then cheers

ἔρως•17d ago

you can try this again when you have a proper grasp on javascript's basic concepts

RIZE Hobberz•17d ago

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

34KMembers

View on Discord

Want results from more Discord servers?

Add your server

Can't figure out how to wrap text under an imageBasically, what I want to achieve is this (1st image): https://prnt.sc/EO_CIn76U9UT The closest I c How to add stuff off of my sidebarI want to add stuff on the right side of my website but it isnt showing up Using escaped unicode in contentIs it possible to use escaped unicode in content to get emoji combinations like Phoenix for example,Github blocked push due to secretsIt was right, my `rest.http` file was misspelt in my `gitignore`. But now it's correct and git is Trying to get the cards over each other properlyI want to set the back-card under the front-card with wider and shorter than the front-card, but cou Overflow Issuehttps://w5bkz10l-3000.inc1.devtunnels.ms/ I'm trying to find which section is overflowing, tried inp Using Vite with SCSSSo i was advised to try scss with vite instead of just using node as i was getting errors. What i d Absolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positi SVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one of Handling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several real React + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the page VS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried every Adding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax high Flexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make <a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return: ``` <ul className="quickLink_list"> <li> creating calculator``` let operatorsArray = document.querySelectorAll('.operator') function bgColor(a){ let bgCol Login Page Improvements/ChangesI'm still learning html and css. What can I improve in my login page? <body> <div class="main-c Animating outline offsetsIs there a smoother way to animate the offset of an outline? It looks choppy. https://codepen.io/n

Gaming

Programming

Search bar js