doufei5315
2017-06-05 00:39
浏览 72

使用实时结果在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.

图片转代码服务由CSDN问答提供 功能建议

我正在使用Laravel 5.4,我在管理面板中有一个用户列表我想添加搜索框 我的用户列表顶部搜索它们,我希望结果是实时的(当键入单词结果显示时)我想应该使用Ajax(不确定!)

让我说这是我的 用户列表代码:

  @foreach($ users as $ user)
&lt; td&gt; {{$ user-&gt; first_name}}&lt; / td&gt; 
  &lt; td&gt; {{$ user-&gt; last_name}}&lt; / td&gt; 
&lt; td&gt; {{$ user-&gt; username}}&lt; / td&gt; 
&lt; td&gt; {{$ user  - &gt;电子邮件}}&lt; / td&gt; 
 @ endforeach 
   
 
 

如何使用该搜索进行搜索? \ n

我应该安装任何插件还是只使用Vue.Js或......?

谢谢。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dormbaf90464 2017-06-05 02:20
    已采纳

    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 ..

    点赞 评论
  • dsbiw2911188 2017-06-05 01:38

    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>
    
    
    点赞 评论

相关推荐 更多相似问题