Question 15053 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Search form on jquery

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

2

Answers


  1. 0

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

    <ul class="nav metis-menu" id="side-menu">
   <li class="sales">
      <a href="#" aria-expanded="false">
        <i class="fa fa-shopping-basket menu-icon"></i>
        <span class="menu-text">
        Sales                
        </span>
        <span class="fa arrow pleft5"></span>
      </a>
      <ul class="nav nav-second-level collapse" aria-expanded="false">
         <li class="order_list">
            <a href="#">
                <i class="fa fa-sticky-note menu-icon"></i>
                <span class="sub-menu-text">
                Order                        
                </span>
            </a>
         </li>
         <li class="sales_channel">
            <a href="#">
                <i class="fa fa-tasks menu-icon"></i>
                <span class="sub-menu-text">
                channel                        
                </span>
            </a>
         </li>
         <li class="trade_discount">
            <a href="#">
                <i class="fa fa-percent menu-icon"></i>
                <span class="sub-menu-text">
                    Trade                        
                </span>
            </a>
         </li>
         <li class="sales_diary_sync">
            <a href="#">
            <i class="fa fa-spinner menu-icon"></i>
            <span class="sub-menu-text">
            Diary sync                        
        </span>
            </a>
         </li>
      </ul>
   </li>
   <li class="menu-item-dashboard">
      <a href="#" aria-expanded="false">
        <i class="fa fa-desktop menu-icon"></i>
        <span class="menu-text">
        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');
            }
        }
    });
 });
    Login or Signup to reply.
  2. 0

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

Back To Top
Search