搜索单词并在页面上平滑滚动

Question

我的客户想在特定页面上添加一个搜索框，以允许他们的用户搜索问题并滚动到该文本。这样他就可以更轻松地将客户引导至常见问题解答问题的正确部分。

搜索关键字“order”后，该功能滚动并在页面上突出显示“order”，但下拉列表停止工作，我们必须刷新页面才能从头开始搜索。我正在寻找一种功能，它可以流畅地滚动并且不必刷新页面即可搜索另一个关键字。

关于如何完成此操作的任何建议？

<input type="text" id="search-term" />
<input type="submit" id="search-button" value="search" />


function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
       // var wholeWordOnly = new RegExp("\g"+searchTerm+"\g","ig"); //matches whole word only
        //var anyCharacter = new RegExp("\g["+searchTerm+"]\g","ig"); //matches any word with any of search chars characters
        var selector = selector || ".faq" ;  //use body as selector if none provided
        var searchTermRegEx = new RegExp(searchTerm,"ig");
        var matches = $(selector).text().match(searchTermRegEx);
        if(matches) {
                $('.highlighted').removeClass('highlighted'); //Remove old search highlights
                $(selector).html($(selector).html()
                   .replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>"));
            if($('.highlighted:first').length) {             //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').offset().top);
            }
            return true;
        }
    }
    return false;
}

$(document).ready(function() {
    $('#search-button').on("click",function() {
        if(!searchAndHighlight($('#search-term').val())) {
            alert("No results found");
        }
    });
});

Answer 1

这对我有用：

// instead of: $(window).scrollTop($('.highlighted:first').offset().top);
// use this:
$('.highlighted:first')[0].scrollIntoView();

Answer 2

你的固定脚本在这里；希望有用:

function findThe(a, b){
   console.log(a);
   if(a){
      // var wholeWordOnly = new RegExp("\g" + a + "\g","ig"); //Matches whole word only
      // var anyCharacter = new RegExp("\g[" + a + "]\g","ig"); //Matches any word with any of search chars characters
      var c = (typeof(b) !== "undefined" && b != null) ? b : document.getElementsByTagName('body')[0];
      var d = new RegExp(a, "ig");
      var matches = c.innerText.match(d);
      if(matches){
         if(typeof(document.querySelector('.highlighted')) !== "undefined" && document.querySelector('.highlighted') != null){
            for(var i = 0; i < document.querySelectorAll('.highlighted').length; i++){
               document.querySelectorAll('.highlighted')[i].outerHTML = document.querySelectorAll('.highlighted')[i].innerText;
            }
         }
         c.innerHTML = c.innerHTML.replace(d, "<span class='highlighted'>" + a + "</span>");
         if(document.querySelector('.highlighted')){
            document.querySelector('.highlighted').scrollIntoView();
         }
         return true;
      }
   }
   return false;
}

function fSearch(){
   if(!findThe(document.getElementById('search-term').value)){
      alert("No results found");
   }
}

.highlighted{background-color:#f1f100}

<!-- Page Content -->
<h1>At dolor cumque hic dolorem commodi eos facilis ipsum. </h1>
<p>Et odio doloremque est harum possimus est tempore culpa est dolores labore et molestiae laudantium in nesciunt veniam! Ut totam laboriosam ea iste suscipit a voluptate sunt ut eveniet rerum? Ea iusto quia eos possimus nostrum 33 harum dignissimos. Qui dolores possimus <em>Eos galisum rem sequi laboriosam non consequatur voluptatem</em>. Hic minus temporibuseos minima aut eligendi repellat. Qui consequuntur dicta et obcaecati aspernatur sed temporibus iusto non reiciendis ipsum. Et autem excepturi est galisum obcaecati <a href="https://www.loremipzum.com" target="_blank">Aut enim ea libero ipsam ab officia consequuntur</a>. Ut voluptatem ipsa eum quibusdam ipsa et laboriosam quibusdam id consectetur voluptatem et fugit dignissimos cum architecto quaerat. </p>
<ul>
   <li>Ut fuga omnis eos internos autem! </li>
   <li>Quo nobis nihil sit debitis rerum et libero accusamus. </li>
   <li>Est enim similique ut deserunt voluptatem qui sint mollitia. </li>
   <li>Qui molestiae tempore ut laboriosam dolorum a libero aspernatur qui sapiente voluptas. </li>
</ul>
<h2>Et similique libero est dolorem ipsam et impedit repudiandae. </h2>
<p>Ut deserunt deleniti non voluptas autem in numquam nulla. Qui voluptates voluptatem quo eligendi debitis non incidunt officiis quo rerum debitis ut eaque animi. Non dolorem cumque qui quasi animi sed animi enim. Ad sint reiciendis ex iste esse ea rerum ipsum aut ipsam similique sed accusantium animi eos doloremque totam? Eum blanditiis animi et consequatur tempora <a href="https://www.loremipzum.com" target="_blank">Aut necessitatibus</a>. Rem ullam omnis et facere obcaecati <strong>Et doloribus hic quisquam earum qui autem odio et labore enim</strong> qui velit vero. Quo dolore dolor qui ratione nulla sed optio nemo. Non voluptates culpa aut quasi aliquam et quibusdam eaque et laudantium nesciunt. </p>
<ol>
   <li>Ut molestiae distinctio qui velit tenetur. </li>
   <li>Qui possimus excepturi a maiores repellendus sit quibusdam sunt hic nesciunt illo. </li>
   <li>Rem dolor tempora sed molestiae quae et quaerat voluptatem. </li>
   <li>Ex reiciendis soluta quo iusto omnis aut laboriosam repudiandae et cumque unde. </li>
   <li>Non porro aliquid aut nostrum optio. </li>
</ol>
<dl>
   <dt><dfn>Et voluptatum sint qui nulla voluptas. </dfn></dt>
   <dd>Id doloribus nemo est numquam doloremque. </dd>
   <dt><dfn>In minus atque quo debitis numquam. </dfn></dt>
   <dd>Non cumque sunt et sunt cumque ex commodi exercitationem! </dd>
   <dt><dfn>Et tempora quis et sunt incidunt. </dfn></dt>
   <dd>Eos voluptatem asperiores hic iure facere et odio officia? </dd>
   <dt><dfn>Sit velit itaque. </dfn></dt>
   <dd>Ea corrupti voluptate et dolore iure sed dignissimos accusamus. </dd>
</dl>
<h3>Eum ducimus labore vel doloribus nihil sed blanditiis repellat. </h3>
<p>Non exercitationem voluptatem <em>Nam nulla eum facere Quis ut magni quidem</em> rem facere incidunt. Delectus molestiae id quae ullam qui laboriosam itaque. Vel dolorem adipisci aut dicta assumenda quo enim voluptatibus non recusandae voluptatem. Et doloremque excepturi et minus suscipit est consequatur eveniet qui maiores natus. Et temporibus quam qui atque laborum qui quia voluptas qui iusto quis. At quia sunt ad quae autem aut odit dolores aut rerum quisquam vel repellendus expedita ad deserunt consequatur ut dolor odio. Qui labore odio et pariatur veniamsed animi. Ut dolorem corrupti et natus iure sed expedita tenetur et iure saepe et Quis soluta aut voluptatem officiis. </p>
<blockquote cite="https://www.loremipzum.com">Et modi modi eos voluptas doloribus non nisi culpa et esse eaque! </blockquote>
<pre><code>&lt;!-- Et sunt odit vel corporis reprehenderit. --&gt;<br>&lt;corrupti&gt;Qui asperiores incidunt.&lt;/corrupti&gt;<br>&lt;sint&gt;Non omnis commodi est tempora quia.&lt;/sint&gt;<br>&lt;hic&gt;Aut omnis molestias nam doloribus numquam a voluptas consequatur.&lt;/hic&gt;<br>&lt;et&gt;Et repudiandae error At aliquid modi.&lt;/et&gt;<br></code></pre>
<!-- End of Page Content -->

<form action="#">
   <input type="text" id="search-term" />
   <button type="submit" id="search-button" onclick="fSearch()">Search!</button>
</form>

搜索单词并在页面上平滑滚动

Search word and scroll smoothly on page

html

javascript

jquery

shopify