Laravel AJAX search and display posts
我想用Laravel创建一个AJAX搜索。我被困在显示控制器返回的结果(帖子)的部分。到目前为止,我有这个:
搜索表单(home.blade.php)
1 2 3 4 5 6 7 | //The search form {{ Form::open(array('id' => 'search', 'url' => ' ')) }} {{ Form::text('query', Input::old('query'), array('placeholder' => 'Search for posts..')) }} {{ Form::hidden('sort_col', Input::old('sort_col')) }} {{ Form::hidden('sort_dir', Input::old('sort_dir')) }} {{ Form::button('<i class="fa fa-search">', array('type' => 'submit', 'name' => 'submit', 'title' => 'Zoeken')) }} {{ Form::close() }} |
显示帖子(home.blade.php)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- Posts !--> @if (!$posts->count()) No posts found! @else @foreach ($posts as $post) <img src="{{ URL::to($post->thumbnail) }}" alt="" /> {{{ $post->title }}} @foreach ($post->tags as $tag) description }}}">{{{ $tag->title }}}</abbr> @endforeach {{ $post->rating }} @endforeach @endif <!-- /Posts !--> |
HomeController.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | public function postSearch() { if (!Request::ajax()) { return null; } $input = array( 'query' => Input::get('query'), 'sort_col' => Input::get('sort_col'), 'sort_dir' => Input::get('sort_dir'), ); $posts = new Post; $posts = $posts->select(...)->where(...)->orderBy(...); //Search query here Input::flash(); return $posts; } |
提交搜索时,将调用
jQuery(home.blade.php)
1 2 3 4 5 6 7 8 9 10 | $('#search').submit(function(e) { e.preventDefault(); var form = $(this); $.post(form.attr('action'), form.serialize(), function(data) { $('#posts').html(data); console.log(data); }); }); |
一切正常,并且正在返回数据。当我将数据登录到控制台时,它看起来像这样:
红色框中的对象是帖子。如何在
您将不得不遍历帖子数组并创建必要的jquery元素。
这应该给你一个主意:
1 2 3 4 5 6 7 8 9 10 11 12 | for(var i=0; i<data.length; i++){ var post = data[i]; var listItem = $('').addClass('list-item clearfix'); var content = $('').addClass('content'); var img = $('<img/>').attr('src', post.thumbnail); var h1 = $('').text(post.title); // etc content.append(img).append(h1); listItem.append(content); $('#posts').append(listItem); } |
更新
对于图像URL,我在控制器中执行以下操作:
1 2 3 4 5 6 7 8 9 10 | public function postSearch() { // ... code omitted foreach($posts as $post){ $post->thumbnail = URL::to($post->thumbnail); } return $posts; } |
这将缩略图属性替换为可在客户端上使用的生成的完整URL。