symfonyでajaxを使用したライブ検索

Question

symfonyでajaxを使用してライブ検索を実装したかったのです。私はすでに表示されているリストから検索したいと思って、フィルタリングして同じ場所に結果を表示したいと思っていました。これは私がこれまで行ってきたことです。

コントローラー：

$searchTerm = $request->query->get('search'); 

     $em = $this->getDoctrine()->getManager(); 
     $search = $em->getRepository('AppBundle:Classified')->searchClassifieds($searchTerm); 


    if ($request->isXmlHttpRequest()) { 
     return JsonResponse::create(['status' => 'success', 'results' => $search]); 

    } 

    return $this->render('classifiedList.html.twig', [ 
     'classifiedList' => $search 
    ]); 

アヤックス：

$(document).ready(function(){ 
     $("#search").on('keyup', function(e) { // everytime keyup event 
      $('#spinner').show(); 
      e.preventDefault(); 
      var input = $(this).val();// We take the input value 
      var $search = $('#search'); 

      $.ajax({ 
       type: "GET", 
       url: "{{ path('search') }}", 
       dataType: "json", 
       data: $search.serialize(), 
       cache: false, 
       success: function(response) { 
        $('.card-deck').replaceWith(response); 
        $('#spinner').hide(); 
        console.log(response); 
       }, 
       error: function(response) { 
        console.log(response); 
       } 
      }); 
     }); 
    }); 

小枝：

<div class="card-deck"> 
    <i id="spinner" style="display:none; font-size: 20px" class="fa fa-spinner fa-pulse fa-2x fa-fw"></i> 
    {% for classified in classifiedList %} 
     <div class="card"> 

      <a href="{{ path('classified_show',{'classifiedId' : classified.id}) }}"> 
       <img class="card-img-top img-fluid" src="{{ asset(classified.image) }}" alt="{{ classified.title }}"> 
      </a> 

      <div class="card-block"> 
       <a href="{{ path('classified_show',{'classifiedId' : classified.id}) }}" class="classified-title"> 
        <h5 class="card-title">{{ classified.title }}</h5> 
       </a> 
       <p class="card-text classified-brand">{{ classified.brand.name }}</p> 
       <p class="card-text classified-price">{{ classified.price }}€</p> 
       <p class="card-text classified-status">{{ classified.statusId }}</p> 
       <p class="card-text classified-type">{{ classified.typeId }}</p> 
       <a href="{{ path('classified_show',{'classifiedId' : classified.id}) }}" class="btn btn-primary details-button">Details</a> 
      </div> 

      <div class="card-footer"> 
       <p class="card-text classified-user"><i>{% trans %}by{% endtrans %} {{ classified.user }}</i></p> 
       <div class="classified-date"><i>{{ classified.createdAt|time_diff }}</i></div> 
      </div> 
     </div> 
    {% endfor %} 

それが働いていると私はそれがコンソールに結果を取得している見ることができます。しかし、何とか結果を表示していません。

ありがとうございました。

Answer 1

だからこれは私が行って何であり、その作業。

 $searchTerm = $request->query->get('search'); 

     $em = $this->getDoctrine()->getManager(); 
     $search = $em->getRepository('AppBundle:Classified')->searchClassifieds($searchTerm); 

    $results = $query->getResult(); 

    $content = $this->renderView('search-result.html.twig', [ 
     'results' => $results 
    ]); 

    $response = new JsonResponse(); 
    $response->setData(array('classifiedList' => $content)); 
    return $response; 

そしてまた、いくつかのAJAXの変化だけでなく

$.ajax({ 
     type: "GET", 
     url: "{{ path('search') }}", 
     dataType: "json", 
     data: {search: input}, 
     cache: false, 
     success: function (response) { 
       $('.card-deck').html(response.classifiedList); 
       $('#spinner').hide(); 
       console.log(response); 
        }, 
     error: function (response) { 
       console.log(response); 
        } 
     });   

そして、得られたテンプレートが他のテンプレートを拡張してはならないことに注意してください。

Answer 2

レスポンスはjsオブジェクトであり、そのHTMLで置き換えようとしています。以前のhtmlを置き換えるには、jsでレンダリングを行うか、htmlを返す必要があります。

Answer 3

無効な形式のJSONを期待して、HTML

dataTypeとを返すには、あなたが期待する応答の種類のjQueryを語っています。

$.ajax({ 
      type: "GET", 
      url: "{{ path('search') }}", 
      data: $search.serialize(), 
      cache: false, 
      success: function(response) { 
       $('.card-deck').replaceWith(response); 
       $('#spinner').hide(); 
       console.log(response); 
      }, 
      error: function(response) { 
       console.log(response); 
      } 
     }); 

または

 $('.card-deck').load("{{ path('search') }}?search="+ $search.val()); 

とあなたのコントローラーを更新：

$searchTerm = $request->query->get('search'); 

$em = $this->getDoctrine()->getManager(); 
$search = $em->getRepository('AppBundle:Classified')->searchClassifieds($searchTerm); 

return $this->render('classifiedList.html.twig', [ 
'classifiedList' => $search 
]);