在symfony

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
    ]);

的Ajax：

 $(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

响应是一个js对象，你试图用它替换html。你需要在js中做一些渲染或者返回html来替换之前的html。

Answer 2

预期格式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
]);

Answer 3

所以这就是我所做的和它的工作。

        $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);
                    }
       });           

另请注意，生成的模板不应扩展任何其他模板。