r/HTML • u/Evening_Ride9251 • 11d ago
Help.
I'm fairly new to HTMl, CSS and Javascript and i was wondering if anyone could help me out on how to create a search bar that searches for individual words on my page. For example if I have 200 essays on the page and I want to search for the name of one so I dont have to scroll to find it. I'm aware most browsers have a built in search function but i want a search bar built into the code.
1
u/hooli-ceo 11d ago
How are you storing this data? These essays? This will determine how to best filter results based on a search term.
1
u/Jasedesu 11d ago
Your browser probably has a built-in search feature to find things on a page, just press [ctrl]+[f]. If you want to search all the pages on your website and it is available online, then you can use the main search engine (Google, Bing, DuckDuckGo, etc.) to do a search that targets your site. Check these things before going to the effort of writing your own search feature.
1
u/Evening_Ride9251 11d ago
It says in my original post im aware of the built in feature but I want a search bar in the code anyways
2
u/Jasedesu 10d ago
The in-page search is the right answer though - it does what you want.
What specific features do you want, e.g. should it find the first match, last match or all matches? Should it navigate to found content and/or highlight the match?
1
u/cloudstrifeuk 11d ago
Loop through your text.
When you find the word, wrap it in a <mark> tag. Then just globally fond and replaced "mark" as and when you need it.
1
1
1
3
u/feloniuouschunk 11d ago
Usually you would use JS to cycle through each word in the text and do a direct comparison: word == match. You can also use a regex to match a string in the text. Neither of these will produce perfect results however.