How to trigger search button to go to a web page from user inputs?

Question

I am making my first search bar/engine. I want to make the search bar respond to user inputs so that it could send them to a specific website. The issue I have is that my search button is not sending the user to a webpage when the user inputs certain keywords from texts inside <li><a> </a></li> into the <input></input> and presses the search button. How do I fix this?

Edit:

Website: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_01/Lab_1.html

//Search engine functionality
var sForm = document.getElementById("srchFrm");

document.addEventListener("click", function(event) {
    var clickedInside = sForm.contains(event.target);

    if (clickedInside) {
        //Displaying the search suggestions
        document.getElementById("srchRslts").style.display = "block";
    } else {
        //Hiding the search suggestions
        document.getElementById("srchRslts").style.display = "none";
    }
});

//Credit to W3Schools
function searchingResults() {

    // Declaring variables
    let input, filter, ul, li, a, i, txtValue;
    input = document.getElementById('srchBar');
    filter = input.value;
    ul = document.getElementById("srchRslts");
    li = ul.getElementsByTagName('li');

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;

        if (txtValue.indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }

    //Credit to Textfixer.com and https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box for the search button code.

    //Get the Search Button
    var submitButton = document.getElementById("sbmtBtn");

    //Add event listener to the submit button
    input.addEventListener("keyup", function(e) {

        e.preventDefault();

        //Press enter to activate the search engine
        if (event.keyCode === 13) {
            submitButton.click();
        }
    });

    function cSbmtBtn() {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;

        if (filter == txtValue) {
            submitButton.value = txtValue;
        }
    }
}

<!--Basic Search Bar.-->

<form id="srchFrm">
    <input id="srchBar" type="text" onKeyUp="searchingResults();" placeholder="Search...">
    <button type="submit" id="sbmtBtn" value="" onClick="cSbmtBtn"><i class="fa fa-search"></i></button>

    <ul id="srchRslts">
        <li><a href="Lab_1.html">Home</a></li>
        <li><a href="Lb1Labs.html">Labs</a></li>
        <li><a href="Lb1Projects.html">Projects</a></li>
        <li><a href="https://qwfepfp.blogspot.com/2019/09/blog-intromy-bio-2.html">Blogger</a></li>
        <li><a href="http://techteach.us/index.html">Techteach.us</a></li>
        <li><a href="http://techteach.us/Web2020/">Parent Directory</a></li>
        <li><a href="http://techteach.us/index.html">Mrs. Ramirez's Site</a></li>
        <li><a href="https://www.infotechhs.net/">Information Technology High School Website</a></li>
        <li><a href="Lab_1Redirectory.html">Lab 1</a></li>
        <li><a href="../Lab_02/Lab_2.html">Lab 2</a></li>
        <li><a href="../Lab_03/Lab_3.html">Lab 3</a></li>
        <li><a href="../Lab_04/Lab_4.html">Lab 4</a></li>
        <li><a href="../Lab_05/Lab_5.html">Lab 5</a></li>
        <li><a href="../Lab_06/Lab_6.html">Lab 6</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 7</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 8</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 9</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 10</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 11</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 12</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 13</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 14</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 15</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 16</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 17</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 18</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 19</a></li>
        <li><a href="Lb1ErrorPage.html">Lab 20</a></li>
        <li><a href="../../Projects/Pr1/index.html">Project 1</a></li>
        <li><a href="../../Projects/ECONO/ECONO.html">Project 2</a></li>
        <li><a href="Lb1ErrorPage.html">Project 3</a></li>
        <li><a href="Lb1ErrorPage.html">Project 4</a></li>
        <li><a href="Lb1About.html">About</a></li>
        <li><a href="Lb1PD.html">Privacy & Disclaimer</a></li>
        <li><a href="Lb1TS.html">Terms of Service</a></li>
        <li><a href="Lb1Citations.html">Citation</a></li>
    </ul>
</form>

Since u r handling the form submission in the script u should add an `onsubmit` event handler to the form with a `e.preventDefault()` to prevent it from redirecting the page ... That should fix the "Not found" issue... — Kwame Opare Asiedu, Dec 01 '19 at 23:21
Where should I put the onsubmit event handler function to make the search button work? — Aspiring_Coder, Dec 01 '19 at 23:37

Kwame Opare Asiedu · Accepted Answer · 2019-12-02T23:18:00.067

html

<form id="srchFrm">
    <input id="srchBar" type="text" placeholder="Search...">
    <button type="submit" id="sbmtBtn" value="">Search</button>

    <!-- Rest of form -->

</form>

script.js

// Search engine functionality
var sForm = document.getElementById("srchFrm");
var input = document.getElementById('srchBar');
var anchors = document.querySelectorAll("form ul li a");
var anchorTexts = anchors.map (anchor => anchor.textContent);
var matchedAnchors = [];

// Document click listener to detect clicks inside sForm
document.addEventListener("click", function(event) {

    // Document click handler logic

});

// Submit handler to prevent default form submission.
// Form submission is also triggered when the submit button is clicked
// So the logic of the submit button can be moved here
sForm.addEventListener("submit", function(event) {
    event.preventDefault(); // Necessary to prevent form submission which will redirect the page to the URL in the `action` attribute of the form

    // Form submission logic goes here
    // There can be multiple anchors matching the text, so I'll assume you want the first match
    if (matchedAnchors.length === 0) return;

    // Change the window location to the href of the first matched anchor
    window.location.href = matchedAnchors[0].getAttribute("href")
});

// Input key up handler. Logic for what happens on key up goes here
input.addEventListener("keyup", function(event) {
    var inputValue = event.target.value; // or input.value
    matchedAnchors.splice(0); // Clear the matchedAnchors array before starting a new search

    // Make all anchors visible before starting a new search
    for (const anchor of anchors) anchor.style.display = "inline-block"

    // Find anchors that match the input
    for (const i = 0; i < anchorTexts.length; i++) {
        const anchorText = anchorTexts[i];
        if (anchorText.startsWith(inputValue)) { // Or 'indexOf' if you want a partial match starting from anywhere in the string
            matchedAnchors.push (anchors[i]);
        }
    }

    // Find anchors that match the input
    for (const anchor of anchors) {
        if (matchedAnchors.includes(anchor)) {
            anchor.style.display = "inline-block";
        } else anchor.style.display = "none";
    }
})

Something of this sort should help you out...

I tried inputting the code into my JS file and it is better than my previous code with no "Not Found" when the submit button is clicked. My problem now is how to get the text from the `````` tags to send it to the JS to go to that specific link when the submit button is clicked? — Aspiring_Coder, Dec 02 '19 at 00:49
I've updated the answer with code I think should help with what u want to achieve... — Kwame Opare Asiedu, Dec 02 '19 at 09:15
Thank you for the update. This is an improvement and a step forward into what I want to achieve. There are however bugs I found through JSLint and JSHint which make the search bar non-functional. Especially the bug that says, "anchors.map is not a function". — Aspiring_Coder, Dec 02 '19 at 22:30
Where it reads `querySelector` should be `querySelectorAll` ... — Kwame Opare Asiedu, Dec 02 '19 at 23:16
I looked up a solution for "Anchors.map is not a function" and successfully solved it by doing var anchors = Array.from(document.querySelectorAll("form ul li a"));. The search button is still not functional. Did you already typed the code in for the search button to work or do I have to figure the search button code out? — Aspiring_Coder, Dec 02 '19 at 23:38
The button has a type of submit and will trigger the form submission... That should then call the form handler... — Kwame Opare Asiedu, Dec 02 '19 at 23:50
Thank you for your help. It is gladly appreciated. I got the search engine working now with a few tweaks here and there with getting my search button to have a location.href set to the ```window.location.href = matchedAnchors[0].getAttribute("href");``` inside an if statement. — Aspiring_Coder, Dec 02 '19 at 23:58

How to trigger search button to go to a web page from user inputs?

1 Answers1