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

Question

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.

Answer 1

您实际上必须为此使用ajax技术..但只能使用一次..让angularJS或vue执行搜索功能..我实际上想在此处发布摘要，但似乎有一个错误..所以这里是您可能想要的示例见..

Answer 2

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>