Question

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

//html

 <form class="ps-search--header" action="#" method="post">
              {{ csrf_field()}}
              <input class="form-control" type="text" placeholder="Search Product…" 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();  
    });

Answer 1

这种 keyup 有时不适用于在桌面上运行良好的移动设备您可以在您的自动完成功能上使用此 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();  
    });

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

1 个答案: