如何触发搜索按钮从用户输入转到网页？

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>

Answer 1

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