title: Live search using ajax in symfony
body: <p>I wanted to implement a live search using ajax in symfony. I wanted to search from a list which is already displayed and wanted to filter and show the results in the same place. This is what i have done so far.</p>
  
  <p>Controller:</p>
  
  <pre><code>    $searchTerm = $request-&gt;query-&gt;get('search');
  
          $em = $this-&gt;getDoctrine()-&gt;getManager();
          $search = $em-&gt;getRepository('AppBundle:Classified')-&gt;searchClassifieds($searchTerm);
  
  
      if ($request-&gt;isXmlHttpRequest()) {
          return JsonResponse::create(['status' =&gt; 'success', 'results' =&gt; $search]);
  
      }
  
      return $this-&gt;render('classifiedList.html.twig', [
          'classifiedList' =&gt; $search
      ]);
  </code></pre>
  
  <p>Ajax:</p>
  
  <pre><code> $(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);
                 }
             });
         });
     });
  </code></pre>
  
  <p>Twig:</p>
  
  <pre><code>&lt;div class="card-deck"&gt;
     &lt;i id="spinner" style="display:none; font-size: 20px" class="fa fa-spinner fa-pulse fa-2x fa-fw"&gt;&lt;/i&gt;
     {% for classified in classifiedList %}
          &lt;div class="card"&gt;
  
              &lt;a href="{{ path('classified_show',{'classifiedId' : classified.id}) }}"&gt;
                  &lt;img class="card-img-top img-fluid" src="{{ asset(classified.image) }}" alt="{{ classified.title }}"&gt;
              &lt;/a&gt;
  
              &lt;div class="card-block"&gt;
                  &lt;a href="{{ path('classified_show',{'classifiedId' : classified.id}) }}" class="classified-title"&gt;
                      &lt;h5 class="card-title"&gt;{{ classified.title }}&lt;/h5&gt;
                  &lt;/a&gt;
                  &lt;p class="card-text classified-brand"&gt;{{ classified.brand.name }}&lt;/p&gt;
                  &lt;p class="card-text classified-price"&gt;{{ classified.price }}€&lt;/p&gt;
                  &lt;p class="card-text classified-status"&gt;{{ classified.statusId }}&lt;/p&gt;
                  &lt;p class="card-text classified-type"&gt;{{ classified.typeId }}&lt;/p&gt;
                  &lt;a href="{{ path('classified_show',{'classifiedId' : classified.id}) }}" class="btn btn-primary details-button"&gt;Details&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="card-footer"&gt;
                  &lt;p class="card-text classified-user"&gt;&lt;i&gt;{% trans %}by{% endtrans %} {{ classified.user }}&lt;/i&gt;&lt;/p&gt;
                  &lt;div class="classified-date"&gt;&lt;i&gt;{{ classified.createdAt|time_diff  }}&lt;/i&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      {% endfor %}
  </code></pre>
  
  <p></p>
  
  <p>It is working and I can see it is getting the result in console. But somehow it is not displaying the result.</p>
  
  <p>Thanks.</p>