使用实时结果在laravel数据库中搜索

I'm working with Laravel 5.4 and I have a list of users in admin panel I want to add search box in top of my users list to search them and I want to results be live (when typing words results shows) I guess should use Ajax for that(not sure!)

Let say this is my users list code:

@foreach ($users as $user)
  <td>{{ $user->first_name }}</td>
  <td>{{ $user->last_name }}</td>
  <td>{{ $user->username }}</td>
  <td>{{ $user->email }}</td>
@endforeach

How can I get that search to work with it?

Should I install any plugin or just use Vue.Js or ...?

Thanks.

you actually must use ajax technology for this .. but only once .. let the angularJS or vue do the searching function .. i actually wanted to post a snippet here but there's seems to be a bug .. so here's a sample you might wanna see ..

You could use https://datatables.net/

Include in your html (if you're using gulp, use in your file who controls the dependencies)

    <table id="myTable">
        <thead>
            <th>First name</th>
            <th>Last name</th>
            <th>Username</th>
            <th>Email</th>
        </thead>
        <tbody>
            @foreach($users as $user)
            <td> {{ $user->first_name }} </td>
            <td> {{ $user->last_name }} </td>
            <td> {{ $user->username}} </td>
            <td> {{ $user->email }} </td>
            @endforeach
        </tbody>
    </table>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.js">

    <script>
    $(document).ready(function(){
        $('#myTable').DataTable();
    });
    </script>