成功追加数据到您的表 - JS

Question

我能够成功地查询我的数据库以查找现有数据。但是现在，我不知道如何让表格只显示正在搜索的项目。当文本框被清除时，表格应该回到默认状态。

我该如何做到这一点？

控制器

public function index(Request $request) 
     { 
      $query = "%".$request->get('myInput')."%"; 
      $students = Student::where('name','LIKE',$query)->where('grade_id',Auth::user()->grade_id)->paginate(5);    
      return view('customer.index',compact('stduent','query')); 

     } 

JS

<script> 
     $(document).ready(function() { 
       var typingTimer;    //timer identifier 
       var doneTypingInterval = 100; //time in ms (5 seconds) 

       $("#myInput").on('keyup', function() { 


    clearTimeout(typingTimer); 
       if ($('#myInput').val()) { 
        typingTimer = setTimeout(doneTyping, doneTypingInterval); 
       } 
      }); 
     }); 

     //user is "finished typing," do something 
     function doneTyping() { 
      var key = $('#myInput').val(); 

      if (key.length >= 1) { 
       $.ajax({ 
        url: '/admin/search/?myInput='+key, 
        type: 'GET', 
        beforeSend: function() { 
        $("#table").slideUp('fast'); 

        }, 
        success: function (data) { 
         console.log(data); 
         $("#table").append(data); 
         $("#table").slideDown('fast'); 
        } 
       }); 

     } 
    } 
    </script> 

Answer 1

你可以试试这个：

success: function (data) { 

    var table = $("#table tbody"); 

    $.each(data, function(idx, elem){ 

    table.append(" 
    <tr><td>"+elem.id+"</td> 
    <td>"+elem.name+"</td> 
    <td>"+elem.lastname+"</td> 
    </tr> 
    "); 
    }); 
    } 

因为您正在检查if (key.length >= 1)这意味着如果用户没有输入任何内容，请将该表与当前内容留在一起。 Read this

Answer 2

您可以使用$("#table").empty()它以清除新的搜索追加数据之前