Search form on jquery-CodePudding

i have html css js web-site and i have a little problem. I make html and css for my search_form. I need to scroll the site page to a current product when user enters the product name in the search engine. I suggest that when i'm inputting product name with class .text_2_Rapid_Item_1 my page is scrolling before product .Rapid_Item_1 with product name .text_2_Rapid_Item_1. How can i do that?

// scroll to current product (it didn't work)
$(function () {
  $(".text_2_Rapid_Item_1").on("input", function () {
    $(".Rapid_Item_1").get(0).scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  });
});

CodePudding user response：

This may help you. To show the menu in visible area and for search using innerText

<ul  id="side-menu">
   <li >
      <a href="#" aria-expanded="false">
        <i ></i>
        <span >
        Sales                
        </span>
        <span ></span>
      </a>
      <ul  aria-expanded="false">
         <li >
            <a href="#">
                <i ></i>
                <span >
                Order                        
                </span>
            </a>
         </li>
         <li >
            <a href="#">
                <i ></i>
                <span >
                channel                        
                </span>
            </a>
         </li>
         <li >
            <a href="#">
                <i ></i>
                <span >
                    Trade                        
                </span>
            </a>
         </li>
         <li >
            <a href="#">
            <i ></i>
            <span >
            Diary sync                        
        </span>
            </a>
         </li>
      </ul>
   </li>
   <li >
      <a href="#" aria-expanded="false">
        <i ></i>
        <span >
        Dashboard                
        </span>
      </a>
   </li>
</ul>

And this is the jquery part of the above HTML

$(function() {
    $('#side-menu ').prepend("<li><input id='searchmenu' class='form-control'  placeholder='Search Menu' type='text' /></li>");
    $('aside li').click(function(){
        localStorage.setItem('menustay', $(this).attr("class"));
    });
    var strart = localStorage.getItem('menustay');
    var array = strart.split(' ');

    var toFindStr = array[0];
    var $scrollTo = $('aside');
    var $container = $scrollTo[0].children[0].children;
    for(var i=0; i<$container.length; i  ){
        if(toFindStr == $container[i].classList[0]){
            var findst = $('li.'   toFindStr);
            if(findst[0].offsetTop != 0)
                var offsetdata = findst[0].offsetTop;
            else             
                var offsetdata = findst[1].offsetTop;
            
            var y = $('#side-menu').scrollTop();
            $('#side-menu').animate({ scrollTop: y   (offsetdata - 200) }, 50) 
        }
    }
    
    $('#searchmenu').on('keyup', function(data){
        for(var i=0; i<$container.length; i  ){
            $('li.'   $container[i].classList[0]).css('display', 'none');
            $('#setup-menu-item').css('display', 'none');
            $('#searchmenu').css('display', 'block');
            if(data.target.value == ''){                
                $('li.'   $container[i].classList[0]).css('display', 'block');
                $('#setup-menu-item').css('display', 'none');
                $('#searchmenu').css('display', 'block');
            }
            else if($container[i].innerText.toLowerCase().search(data.target.value) > -1){
                $('li.'   $container[i].classList[0]).css('display', 'block');
                $('#setup-menu-item').css('display', 'block');
            }
        }
    });
 });

CodePudding user response：

If you using normal input and wants move the particular place based on value then use below code. but there is cons if having similar text on page. so suggesting to use typeahead and while select value from typeahead you can pick product and move the place (instead of on change input).

    $(".text_2_Rapid_Item_1").on("input", function () {
      if($(document).find("." $(this).val()).length > 0){

       // try $("." $(this).val()).scrollIntoView({ or get(0)

       $("." $(this).val()).get(0).scrollIntoView({
         block: "start",
         behavior: "smooth",
       });
      } 
    });