Shopify Question posted in
The Shopify help center can be found here.

Search word and scroll smoothly on page – Shopify

My client wants to add a search box on specific pages that will allow their user to search for a question and it will scroll to that text. This way it’s easier for him to direct clients to the right part of the FAQ question.

After searching keyword "order", the function scrolls and highlights "order" on page, but the dropdown stops working and we have to refresh the page to start searching from the beginning.
I am looking for a function in which it scrolls smoothly and don’t have to refresh the page to search another keyword.

Any advice on how to accomplish this?

enter image description here

enter image description here

<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");
        }
    });
});
Tags:

2

Answers


  1. 0

    This worked for me:

    // instead of: $(window).scrollTop($('.highlighted:first').offset().top);
// use this:
$('.highlighted:first')[0].scrollIntoView();
    Login or Signup to reply.
  2. 0

    Your fixed script is here; Hope to be useful:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search