在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。您需要在js中进行一些渲染或返回html来替换以前的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 
]);