javascript - 如何为网页创建 ‘search function’？

Question

我是 jQuery/JavaScript 新手，但我很清楚自己想要什么，只是努力让它发挥作用。

我有一个由不同“div”组成的网页，这些“div”具有不同的“id”。我将这些 div 包装在 pageContainer div 中。我希望能够在“搜索栏”中输入一个单词，然后在网页中查找该单词。它将通过出现在搜索栏下方的可折叠 div 来表示匹配的单词，该搜索栏将链接到该单词所在的不同 div id。单击时该单词将突出显示。

这很简单，但我认为这是一个很好的练习。

现在我知道我正在 pageContainer 中搜索该单词。根据我的理解，我必须在每个 div 中搜索，而不是整个页面。 我该怎么做？

另外，作为旁注，为什么我输入的每个字符都会开始搜索。不是应该只从 3 个以上的字符开始吗？我认为这就是 keyup 的作用。

到目前为止，当我输入一个单词并搜索它时，网页上没有任何反应。

    /*Need to get the below search code working...*/
    var thePage = $(".pageContainer");
    // var content = $.makeArray(thePage.map(function(k, v){
    //  return $(v).text().toLowerCase();
    // }));
    $("#search").keyup(function(){
        var input = $(this).val();
        console.log(input);
        //if match found, make corresponding div link appear in open collapsible div,
        // else say nothing found in open collapsible div
        // console.log(

            thePage.filter.(function(index, value){
                var foundText = $(this).val().toLowerCase();
                // console.log(foundText, " BAAAAA");
                console.log(index, value, " Second Here");//find 'user' input in value
                // console.log(foundText.indexOf(input) >= 0);
                console.log($(value).find(foundText.indexOf(input) >= 0));
                // $(value).filter(foundText.indexOf(input) >= 0);
                $(value).find(foundText.indexOf(input) >= 0);
                var highlight = '<span class="word">' + value + '</span>';
            });
        // );
    }); 

Answer 1

有趣的任务，总结一下要求是:

1. 由具有不同“id”的不同“div”组成的网页。
2. 这些 div 包裹在 pageContainer div 中。
3. 在我的“搜索栏”中输入一个单词，然后在网络中查找该单词页。
4. 通过出现的可折叠 div 表示匹配的单词在搜索栏下方，其中包含指向不同 div id 的链接这个词在哪里。
5. 点击后该词将会突出显示。
6. 搜索应从 3 个以上字符开始

我考虑了以上所有因素并创建了这个 codepen demo(例如搜索“elementum”)。

附注高亮功能还是比较基础的，依赖these这样的插件会更好更安全。 .

    var thePage = $(".pageContainer");
    $('#results').hide(); //Hide the results div at first

    $("#search").keyup(function() {
      //Empty and hide the results div everytime the user types something
      $('#results').empty();
      $('#results').hide();

      //Get the typed value
      var input = $(this).val();

      //Do nothing if it's smaller than three characters
      if (input.length < 3) return;

      //iterate through the results
      var results = $(".pageContainer>div:contains('" + input + "')");
      var counter = 0;
      results.each(function(index, value) {
        counter++;

        //Get the current div that contains the given text
        currentId = $(this).attr('id');
        console.log('div' + index + ':' + currentId);

        //Create a new element in the search div below the search input
        var newP = $('<p/>', {
          text: currentId
        }).click(function() {
          //Highlight when click
          highliter(input, $(this).text());
        });
        $('#results').append(newP);
      });

      //Collapse if no results found
      if (counter) $('#results').show();
      else $('#results').hide();
    });

    function highliter(word, id) {
      //Remove whatever was already highlighted
      $('*').removeClass('highlight');
      
      //Create a regular expression for the given word
      var rgxp = new RegExp(word, 'g');
      
      //Replace the plain text with a highlighted one
      var repl = '<span class="highlight">' + word + '</span>';
      var element = document.getElementById(id);
      element.innerHTML = element.innerHTML.replace(rgxp, repl);

      //Scroll to the position of the results
      $('html, body').scrollTop($(".highlight").offset().top);
    }

body{
  background-color:grey;
}
#search{
  width:200px;
}
#results{
  width:200px;
  border:2px solid black;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
#results p{
  background-color:#AAA;
  margin: 8px;
  cursor:pointer;
}
.highlight{
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" type="text" />
<div id="results"></div>
<hr/>
<div class="pageContainer" id="main">
  SECTION_1 (first div)
  <div id="section1">
    <p>Mauris eget risus ipsum. Ut dignissim justo id orci efficitur, ac ultricies sem ultricies. Nullam id velit vestibulum arcu eleifend tempor non nec purus. Sed mollis metus non aliquam accumsan. Fusce venenatis urna vel elit aliquet accumsan sit amet
      et velit. Cras et molestie sem, et dignissim lorem. Etiam laoreet, dui eget cursus blandit, erat nisi pulvinar erat, sed volutpat turpis ante et massa. Nunc ornare orci ut purus maximus fermentum. Fusce nisl quam, maximus nec tortor quis, sagittis
      maximus velit. Morbi in enim ac augue pharetra ultricies. Ut aliquet magna tellus, non volutpat ex vulputate ac. Curabitur in enim maximus, volutpat nibh ac, auctor urna.</p>
    <p>Vivamus ac lacus rutrum, suscipit mauris et, rhoncus magna. Phasellus a ante a mi fringilla interdum sed feugiat massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec bibendum, tellus sed lobortis ullamcorper, nibh ex maximus
      lacus, egestas scelerisque diam turpis a elit. Suspendisse iaculis, massa in ultricies sollicitudin, est dui bibendum augue, non dignissim nulla nibh ut dolor. Maecenas et mollis est. Donec condimentum laoreet erat, id maximus ante imperdiet in.
      Proin id purus nulla. Vivamus tincidunt facilisis nisl, eget placerat elit mattis at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
  SECTION_2(second div)
  <div id="section2">
    <p>Fusce sit amet sem eget elit volutpat consequat. Nulla hendrerit sem dictum volutpat convallis. Sed interdum, arcu non facilisis condimentum, ipsum purus bibendum ex, a tincidunt leo leo vel sem. Maecenas porttitor quam non tortor accumsan interdum.
      In id ultrices enim. Maecenas risus arcu, egestas nec ante et, vehicula bibendum dui. Quisque nec hendrerit ante. Integer in faucibus augue. Integer imperdiet felis id tempor facilisis. Nam lobortis sem non purus luctus varius. Quisque sit amet
      justo ac dui convallis efficitur eget ut mi. Sed in efficitur nisi, ac rutrum mi. In pulvinar egestas turpis, non tincidunt orci finibus nec. Sed euismod augue eu tortor pharetra maximus eget at urna. Nulla efficitur elit lacus, sit amet faucibus
      justo tristique eget.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque augue non aliquam scelerisque. In tincidunt vel nisi id porttitor. Integer vulputate cursus augue. Sed luctus accumsan dui elementum eleifend. Proin convallis, sem non
      accumsan pulvinar, justo lorem mattis enim, nec lobortis libero nibh nec nisi. Nulla faucibus tellus in magna rutrum, sed porttitor orci pharetra. Mauris sit amet quam enim. Sed laoreet, neque in pretium congue, neque sem tincidunt massa, sed sollicitudin
      orci ex eget nisl. Donec ultrices ligula eget augue convallis, vitae sagittis mauris vulputate. Nulla non bibendum odio, a tincidunt massa. Mauris ultricies augue sit amet venenatis ornare. In pellentesque quam vitae orci pretium rutrum. Vivamus
      non orci congue orci pellentesque euismod ac id dolor. Nam accumsan scelerisque sodales.</p>
  </div>
  SECTION_3 (third div)
  <div id="section3">
    <p>Ut vel eros sit amet eros accumsan imperdiet. Donec placerat urna sit amet tellus eleifend rhoncus. Pellentesque finibus dolor tortor, et dignissim tellus iaculis eu. Etiam sollicitudin mattis fermentum. Etiam porta est turpis, ut consectetur lorem
      sodales eu. Aenean rutrum volutpat efficitur. Morbi a elementum lectus, id ornare orci. Fusce bibendum dignissim lacinia. Aliquam venenatis urna et leo pretium tempus. Proin ligula felis, posuere nec vestibulum quis, pellentesque ut quam. Vestibulum
      sed elementum lectus. Quisque at ipsum id lacus efficitur lacinia non in lorem. Donec tristique lectus eu ex laoreet, non tristique libero blandit. Curabitur massa quam, fermentum sit amet dui non, bibendum convallis orci. Sed vulputate turpis nec
      erat commodo, rhoncus cursus quam ornare. Donec pellentesque posuere tortor vel efficitur.
      <p>
        <p>Duis ligula purus, vulputate sed sodales quis, condimentum sit amet arcu. Sed fermentum ut dui ac posuere. Donec tristique volutpat lobortis. Aenean tortor elit, molestie nec tincidunt non, semper vel nisi. Phasellus quis est sit amet massa facilisis
          posuere. Integer sit amet elit semper ipsum sodales tempus vitae id lacus. Donec facilisis libero sit amet aliquam fermentum. Sed luctus, tortor et ullamcorper faucibus, libero sem ornare tortor, at gravida erat lorem elementum eros.</p>
  </div>
</div>