ウェブページの検索機能を作成するには？

Question

私はjQuery/JavaScriptを初めて使い慣れていますが、私が欲しいものは堅実に考えています。

私は異なった 'div's'で構成され、異なる 'id's'を持つウェブページを持っています。私はpageContainer divにこれらのdivをラップしました。私は自分の「検索バー」に単語を入力することができ、その単語はWebページで検索できます。これは、検索バーの下に表示される折りたたみ可能なdivで一致する単語を意味し、その単語がどこにあるのか異なるdiv idへのリンクを持ちます。クリックするとその単語が強調表示されます。

これは簡単ですが、私はそれを行うのがよい練習であると考えています。

今私は自分の単語を検索していることを知っていますpageContainer。私の理解が進むにつれて、ページ全体ではなく、各divで代わりに検索する必要があります。 どうすればいいですか？

また、私が入力するすべての文字について、検索が開始されるのはなぜですか？ 3 +以上の文字で始めるべきではありませんか？私はそれがkeyupのことだと思った。

今のところ、単語を入力して検索すると、Webページで何も起こりません。

/*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には、別のdiv IDの へのリンクがあります。
5. クリックすると、その単語が強調表示されます。
6. 検索は、私は上記のすべての考慮取って、このcodepen demo （例えば「elementum」を検索）を作成した3+文字

に開始する必要があります。

P.S.ハイライト機能は基本的なもので、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>