How to make a search bar!
Minikeyboard (17)

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

  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
You are viewing a single comment. View All