Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make a search bar!
Minikeyboard (24)

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
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'>

  1. '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
goalkenhighligh (3)

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

Minikeyboard (24)

@goalkenhighligh Thanks alot for your review, means alot! Would you mind upvoting me?

Minikeyboard (24)

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


  • MiniLofe
betosten (1)

Informative, thank you so much!

advaydhiraj (5)

it doesnt do anything i copyied it it didnt do anything

Minikeyboard (24)

@advaydhiraj What do you mean it did nothing?

Minikeyboard (24)

@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!


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

Minikeyboard (24)

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

Coder100 (12752)

Why not have .includes()?

search.filter(a => a.toLowerCase().includes(searchbar.value.toLowerCase()))
Minikeyboard (24)

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

Coder100 (12752)

yeah, but .includes is more efficient @Minikeyboard

Minikeyboard (24)

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

tussiez (583)

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

DigitCommander (31)

var isn't used anymore, I think. It said var wasn't used anymore in Traversy Media's tutorial which is here:
I would use let or const in step 3 even though const is continuous and can't be changed

Minikeyboard (24)

@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


Minikeyboard (24)

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

TylerPlayZ123MC (0)

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

Minikeyboard (24)

@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

k9chelsea2 (730)

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

Minikeyboard (24)

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

Minikeyboard (24)

@NDLFOREVER Give me a link to the weekly challenges

k9chelsea2 (730)
  1. mebe idk lul 2. sure I'll get you a link
Minikeyboard (24)

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

k9chelsea2 (730)

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

Minikeyboard (24)

@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!

k9chelsea2 (730)

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

Minikeyboard (24)

@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

Minikeyboard (24)

⁸@NDLFOREVER tomorrow

Puffy2017 (10)

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