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

Question

我正在制作我的第一个搜索栏/引擎。我想让搜索栏响应用户输入，以便将它们发送到特定网站。我遇到的问题是，当用户从 <li><a> </a></li> 中的文本输入某些关键字时，我的搜索按钮不会将用户发送到网页。进入<input></input>并按下搜索按钮。我该如何解决这个问题？

编辑:

网站: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>

脚本.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";
    }
})

此类内容应该可以帮助您......