Campo de búsqueda dinámico de Symfony usando Ajax

Quería implementar una búsqueda dinámica usando Ajax en Symfony. Tengo una entidad y una tabla en mi base de datos llamada Sesión. Quiero cargar datos de la tabla y mostrarlos en la plantilla. Luego, usando un campo de texto, simplemente puedo escribir lo que estoy buscando y aparecerá dinámicamente.

Puedo cargar desde la base de datos y puedo implementar una búsqueda usando un botón de envío que actualizaría la página. Pero eso no es lo que quiero, no quiero actualizar, quiero que sea dinámico o lo que algunos llamarían una búsqueda en vivo.

Aquí está mi SessionController.php

 /**
 * @Route("/", name="app_session_index", methods={"GET", "POST"})
 * @param Request $request
 * @return Response
 */
public function index(Request $request): Response
{
 $propertySearch = new MyPropertySearch();
 //si si aucun nom n'est fourni on affiche tous les articles
 $sessions= $this->getDoctrine()->getRepository(Session::class)->findAll();
 $form = $this->createForm(PropertySearchType::class, $propertySearch);
 $form->handleRequest($request);
 //initialement le tableau des articles est vide,
 //c.a.d on affiche les articles que lorsque l'utilisateur clique sur le bouton rechercher
 $articles= [];
 if($form->isSubmitted() && $form->isValid()) {
 //on récupère le nom d'article tapé dans le formulaire
 $titre = $propertySearch->getTitle();
 if ($titre!="")
 //si on a fourni un nom d'article on affiche tous les articles ayant ce nom
 $sessions= $this->getDoctrine()->getRepository(Session::class)
 ->findByMultiple($titre);
 }
 return $this->render('session/index.html.twig',[ 'form' =>$form->createView(), 'sessions' => $sessions]);
}

Aquí está usando una entidad y su formulario llamado PropertySearchType.php que he creado. No creo que sea relevante. Sin embargo, está usando el

findByMultiple($título)

que es un método personalizado de QueryBuilder para buscar una sesión utilizando varios criterios.

 /**
// * @return Session[] Returns an array of Session objects
// */
public function findByMultiple($searchValue)
{
 return $this->createQueryBuilder('s')
 ->join('s.coach', 'c')
 ->addSelect('c')
 ->where('s.title LIKE:title')
 ->orWhere('s.description LIKE:desc')
 ->orWhere('s.rating LIKE:rate')
 ->orWhere('c.tier LIKE:tier')
 ->setParameters(
 ['title' => $searchValue, 'tier'=>$searchValue,
 'desc'=>$searchValue, 'rate'=>$searchValue
 ])
 ->getQuery()
 ->getResult();
}

Y finalmente, debería generar lo que necesito en la vista session/index.html.twig que contiene el javascript y el ajax necesarios. Representa todas las sesiones cuando actualizo y un campo de texto para escribir. Pero mientras escribo lo que estoy buscando, la tabla no cambia.

Aquí está el archivo twig que estoy renderizando.

 {% extends 'base.html.twig' %}
{% block title %}Session index{% endblock %}
{% block body %}
 <h1>Session index</h1>
 <h2>Search A Session!!</h2>
 <div class="sidebar-search">
 <div class="input-group custom-search-form">
 <input type="text" id="search" class="form-control" placeholder="Search here">
 </div>
 </div>
 <table class="table">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Description</th>
 <th>Date</th>
 <th>StartTime</th>
 <th>Link</th>
 <th>Rating</th>
 <th>actions</th>
 </tr>
 </thead>
 <tbody>
 {% for session in sessions %}
 <tr>
 <td>{{ session.id }}</td>
 <td>{{ session.title }}</td>
 <td>{{ session.description }}</td>
 <td>{{ session.date? session.date|date('Y-m-d'): '' }}</td>
 <td>{{ session.startTime? session.startTime|date('H:i:s'): '' }}</td>
 <td>{{ session.link }}</td>
 <td>{{ session.rating }}</td>
 <td>
  <a href="{{ path('app_session_show', {'id': session.id}) }}">show</a>
  <a href="{{ path('app_session_edit', {'id': session.id}) }}">edit</a>
 </td>
 </tr>
 {% else %}
 <tr>
 <td colspan="8">no records found</td>
 </tr>
 {% endfor %}
 </tbody>
 </table>
 <a href="{{ path('app_session_new') }}">Create new</a>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
 </script>
 <script type="text/javascript">
 jQuery( document ).ready(function() {
 var searchRequest = null;
 $("#search").keyup(function(e){
 /* La variable value va prendre la valeur insérer dans le champ de texte afin d'effectuer la recherche */
 var value = $(this).val();
 /* Ajax est lancé lors du remplissage du champ texte dont l'id est « search » pour faire la recherche */
 $.ajax({
  /* l'url est une chaine de caractères contenant l'adresse où la requête est envoyée */
  url:{{ path('searchSessions') }},
  /* La méthode utilisée pour transférer les données est GET */
  type: 'GET',
  /*Ici search value va prendre la chaine entrée par un utilisateur dans la zone de recherche et sera placée après l'url */
  data: {
  'searchValue': value
  },
  /*Cette fonction permet de vider le contenu du tableau pour recevoir le nouveau contenu*/
  success: function(retour){
  if(retour){
  $('#t tbody#search').empty();
  $.each(JSON.parse(retour), function(i, obj) {
  $('#t tbody#all').hide();
  $('#t tbody#search').append('<tr><td> '+obj.id+' </td><td> '+obj.title+' </td>' +
   '<td>'+obj.description+' </td><td>'+obj.date+' </td><td> '+obj.startTime+' </td>' +
   '<td> '+obj.link+' </td><td> '+obj.rating+' </td>' +
   '<td><a href="/'+obj.id+'/edit">edit</a> </br>' +
   '<a href="/'+obj.id+'">remove</a></td></tr>');
 
  });
  }
  else
  {
  $('#t tbody#all').show();
  $('#t tbody#search').empty();
  $('#t tbody#search').fadeIn('fast');
  }``
  },
 });
 return false;
 });
 });
 </script>
 {% endblock %}

¡¡Representación visual!!

Solución del problema

Lo primero que noto es en tu código twig: llamas {{ path('searchSessions') }}pero la ruta definida en tu código Symfony es app_session_index.

Pruebe su ruta Symfony con Postman (u otro software similar) y si funciona correctamente, continúe con su código javascript.

De lo contrario, no podrá encontrar el origen del problema (o llevará más tiempo:))