Skip to content
← Back to Community
How to make a search bar!
Profile icon
Minilofe

Today I will be teaching you how to make a search bar with the simple alert function and a variable and function you will be creating!

To start with the lets explain the alert function. The alert function is when a box pops up on your screen requiring a user to close it etc. In the "coding language" is alert function is wrote as
alert()
A simple alert which would be:
alert("how are you!")

Alright now that we have that covered lets get into starting the actual code!

  1. Link the JavaScript
    <script type="text/javascript" src="script.js"></script>

  2. Now you can add a summary of what you want your search engine for example I did this:
    <p>Search for minecraft mobs:</p>

  3. Now make the input.
    <input type="search" id='searchbar'>

  4. 'And to finish the HTML add the submit button.
    <button Onclick = 'search1()';'>Search</button>

Now that we have covered the HTML lets get to the JAVASCRIPT

  1. Lets create the the variable, because we linked search in the input, we will call our variable search. This is how it should look:
    var search =

  2. Now you can start an array by opening brackets.
    var search = []

  3. And now in the array add anything you want separating an item with a comma and putting every item in quotations. For example I did:
    var search = ['Sheep ', 'Cow ', 'Chicken ']

  4. Now create your this function by doing this:
    function search1 {

    }

FYI we call it search1 because in the HTML we referred to it as search1

  1. Now that you made the function we will fill it in with a searchbar, it was from the HTML. Just like this:
    var searchbar = document.getElementById ('searchbar');

  2. And now if you want to make it case-sensitive add this piece of code:
    alert(search.filter( a => a.toLowerCase().indexOf(searchbar.value.toLowerCase()) !== -1));

(don't forget the semi-colon)

6.1. Now this is how the function should look:

function search1() {
var searchbar = document.getElementById ('searchbar');
alert(search.filter( a => a.toLowerCase().indexOf(searchbar.value.toLowerCase()) !== -1));
``
}

Now that you've finished the tutorial you can show of to friends. Or even revamp and make it even up to 0.1% better! This is my first post on the "Talk Page" so sorry if you have any concerns! It would be a pleasure to make any other things you suggest! Have a great day [¬-¬]

Link for the search engine: https://everysparklingevaluations.minikeyboard.repl.co/

Type C to get COW and CHICKEN or you could type CH to get CHICKEN and CO to get COW. And S for sheep.

  • Minilofe/Minikeyboard
Voters
Profile icon
CoderGautamYT
Profile icon
takenusernames
Profile icon
Ryankids
Profile icon
Rushikeshh
Profile icon
MadisonWalker79
Profile icon
Retrospicer
Profile icon
Pcat1
Profile icon
Luis2070
Profile icon
Excapgaming231
Profile icon
DigitCommander
Comments
hotnewtop
Profile icon
goalkenhighligh

I do not know what to say really what you share very well and useful to the community, I feel that it makes our community much more developed, thanks https://templerun3.co

Profile icon
Minilofe

@goalkenhighligh If you think so, please upvote this project, it helps me be more recommended around the community!

thanks

  • MiniLofe
Profile icon
Coder100

Why not have .includes()?

search.filter(a => a.toLowerCase().includes(searchbar.value.toLowerCase()))
Profile icon
Minilofe

@Coder100 It still works either way! Have a nice day OwO

Profile icon
Coder100

yeah, but .includes is more efficient @Minikeyboard

Profile icon
Minilofe

@Coder100 You can add that to it! :³)

Profile icon
Coder100
Profile icon
betosten

Informative, thank you so much!

Profile icon
Minilofe

@betosten Upvote me pls

Profile icon
advaydhiraj

it doesnt do anything i copyied it it didnt do anything

Profile icon
Minilofe

@advaydhiraj What do you mean it did nothing?

Profile icon
Minilofe

@advaydhiraj Ah, I see why

Profile icon
Minilofe

@advaydhiraj Try now + I won't work because you might of copied some code I was trying to explain such as when I explain how to make a variable!

Have a great day and upvote me please!

Profile icon
advaydhiraj

@Minikeyboard i got you

Profile icon
tussiez

Nice! You should use syntax highlighting in your code though
Use three backticks and then the programming language (e.g backticks+javascript)

Profile icon
Minilofe
Profile icon
DigitCommander

var isn't used anymore, I think. It said var wasn't used anymore in Traversy Media's tutorial which is here:
https://www.youtube.com/watch?v=hdI2bqOjy3c
I would use let or const in step 3 even though const is continuous and can't be changed

Profile icon
Minilofe

@DigitCommander Yes, I am aware of that it is still used but not as often. This project was created 1 year ago, when it was a common thing to use. But as of now, I am using "Let" in all my projects

thanks
-Minilofe

Profile icon
DigitCommander

@Minikeyboard Ok then. You're welcome

Profile icon
Minilofe

@DigitCommander Np :) Always here to help beginners who want to learn!

Profile icon
TylerPlayZ123MC

Do not work, my site is soon seen at TPZd.net and search Video Games, nothing happens

Profile icon
Minilofe

@TylerPlayZ123MC Sorry about this, I am not aware on any issues. It might be that you have copied the wrong thing, did you even read? If you believe there is an error, please define me it. Thanks - Minilofe

Profile icon
DigitCommander

Awesome, mate.

Profile icon
Minilofe
Profile icon
DigitCommander

@Minikeyboard You're welcome

Profile icon
ziondiesbroke

d055d45e53415c48b4739faed0f51dbc

Profile icon
[deleted]

How about a Repl showcasing the code all put together so we could see it in action?

Profile icon
Minilofe

@JadenGarcia Yes, I just did not know how to! Lowl.

Profile icon
Ryankids

thank you! now i can make a brower :D

Profile icon
HARSHITHSEYONB

um in my tutorial i tought to make a search bar with just 2 lines of code it will search everything

Profile icon
Minilofe
Profile icon
HARSHITHSEYONB

@Minikeyboard ty wanna team

Profile icon
Minilofe

@HARSHITHSEYONB sorry for late response(took a break), but I find it much easier coding alone, but if u need help, make a question post on "Talk" and send me the link so i can answer.

Profile icon
k9chelsea2

thx for doing this

Profile icon
Minilofe

@NDLFOREVER My pleasure!

Profile icon
k9chelsea2

:3 will try this out on my entry for the weekly challenge lol

Profile icon
Minilofe

@NDLFOREVER Are going to copy everything? Lowl. What will it be based on?

Profile icon
Minilofe

@NDLFOREVER Give me a link to the weekly challenges

Profile icon
k9chelsea2
  1. mebe idk lul 2. sure I'll get you a link
Profile icon
k9chelsea2
Profile icon
Minilofe

@NDLFOREVER DUdE mAyBe I wOuLd liKE tO poST iT ToO ngl

Profile icon
k9chelsea2

Oh KoOlZ

Profile icon
k9chelsea2

btw could you add a screenshot of the finished product because I am a tad bit confused at some parts

Profile icon
Minilofe

@NDLFOREVER I will give you the whole code for js and html in one comment, maybe you could copy and paste and you'll understand!

Profile icon
k9chelsea2

ok cool I tried to do it but it didn't work probably because I misunderstood the tutorial lol

Profile icon
Minilofe

@NDLFOREVER I'm very sorry about that - I made a mistake in the turorial now its fixed. I will give you the whole code later because I'm not on my PC

Profile icon
k9chelsea2

ah tanc u

Profile icon
Minilofe

⁸@NDLFOREVER tomorrow

Profile icon
k9chelsea2

k

Profile icon
staps

Nice, thanks alot Minikeyboard. Helped me code my projects.

Profile icon
Minilofe

@Puffy2017 It's a pleasure! Thanks.