0

我正在尝试仅使用 html、css 和 javascript 创建一个搜索框，它将在我的页面中搜索文本，如果找到匹配的文本，该函数应该突出显示范围内的文本。

我在网上搜索（和stackoverflow），但找不到与我的需求相关的答案）

我知道该怎么做，但我被困在某个点上。这是我的代码到目前为止的样子。

<script type="text/javascript">

function init(){
    //creates a variable equal to the value entered in the text box
    var lookfor = document.getElementById("q").value
    //splits the whole page into an array or words
    var words = document.body.innerHTML.split(" ");
    ///loops through the array to get each word
    for( var i=0; i<words.length; i++){

    }   
    //This is where I get lost, i dont know how to make it so that what you enter
    //in the textbox(lookfor) matches somthing on the page. it will get highlighted. i
    //was thinking about using the find object, but im new to javascript and dont know 
    //how to properly use find yet.
    if(lookfor == words[i]) //Find()------
    { 
        '<span class="highlight">' + words + '</span>'
    }
    else{
        alert("Sorry, your search returned no results! Please Try again.")
    }

}
4

2 回答 2

0

好吧，您的部分问题是您过早地终止了 for 循环。应该看起来更像

<script type="text/javascript">

function init()
{
    //creates a variable equal to the value entered in the text box
    var lookfor = document.getElementById("q").value
    //splits the whole page into an array or words
    var words = document.body.innerHTML.split(" ");
    ///loops through the array to get each word
    for( var i=0; i<words.length; i++)
    {      
        //This is where I get lost, i dont know how to make it so that what you enter
        //in the textbox(lookfor) matches somthing on the page. it will get highlighted. i
        //was thinking about using the find object, but im new to javascript and dont know 
        //how to properly use find yet.
        if(lookfor == words[i]) //Find()------
        { 
            '<span class="highlight">' + words + '</span>'
        }        
    }
}
于 2012-09-19T16:13:40.687 回答
0

所以这是一种使用 W3.JS JavaScript 库的方法（我提供了它在 w3schools 浏览器上存储位置的链接）。要搜索的文本应该在文档标签内。与

  • 每个项目的对象。

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://www.w3schools.com/lib/w3.js"></script>

<body>

<h2>Filter List</h2>

<p>Search for a name in the input field:</p>

<input oninput="w3.filterHTML('#id01', 'li', this.value)" placeholder="Search for names..">

<ul id="id01">
   <li>Some text to search</li>
   <li>Some other text to search</li>
</ul>

</body>
</html>

    祝你有美好的一天。

    • 于 2021-06-15T18:44:40.863 回答