时间戳

首页 > 解决方案 > 自动完成功能不适用于移动视图

laravel - 自动完成功能不适用于移动视图

问题描述

您好，我正在我的项目中创建搜索任务，它适用于桌面视图，但是当我在移动设备中打开我的网站并按下键时，键盘会在第二秒内打开并关闭，这是我的代码中的问题。什么是错误？为什么代码在移动视图中不起作用？

//html

 <form class="ps-search--header" action="#" method="post">
              {{ csrf_field()}}
              <input class="form-control" type="text" placeholder="Search Product…&quot; id="product_name">
              <button><i class="ps-icon-search"></i></button>
              <div id="product_list"></div>
            </form>

//控制器

public  function fetch(Request $request)
    {
     if($request->get('query'))
         {
              $query = $request->get('query');
              $data = DB::table('products')
                ->where('product_name', 'LIKE', "%{$query}%")
                ->get();
              $output = '<ul class="dropdown-menu" style=" display:block;  ;width:100%">';
                  foreach($data as $row)
                  {
                        $name=[];
                        $name=explode(" ",$row->product_name);
                       $output .= '
                       <li><a href="/productDetail/'.$row->product_slug.'">'.$row->product_name.'</a></li>
                       ';
                  }
              $output .= '</ul>';
              echo $output;
         }
    }

//自动完成

 $('#product_name').keyup(function(){ 

        var query = $(this).val();
        if(query != '')
        {
         var _token = $('input[name="_token"]').val();
         $.ajax({
          url:"/autocomplete",
          method:"get",
          data:{query:query, _token:_token},
          success:function(data){
           $('#product_name').fadeIn();  
                    $('#product_list').html(data);
          }
         });
        }
    });
    $(document).on('click', 'li', function(){  
        $('#product_name').val($(this).text());  
        $('#product_list').fadeOut();  
    });

标签： laravel

解决方案

这种keyupwold 有时不适用于在桌面上运行良好的移动设备您可以在您的自动完成功能上使用此 Keyup 它在两者上的工作检查下面的代码

 $('#product_name').on('keyup input', function(e){
      
      if(e.keyCode == 13) {
      $("input").blur();
     
  }

   var query = $(this).val();
        if(query != '')
        {
         var _token = $('input[name="_token"]').val();
         $.ajax({
          url:"/autocomplete",
          method:"get",
          data:{query:query, _token:_token},
          success:function(data){
           $('#product_name').fadeIn();  
                    $('#product_list').html(data);
          }
         });
        }
  
  
});
$(document).on('click', 'li', function(){  
        $('#product_name').val($(this).text());  
        $('#product_list').fadeOut();  
    });

推荐阅读