live search in symfony4 using ajax+js

**younex11** · 29/10/2018, 01h56

hey friends i want to implement a live search under symfony 4 but im stuck.
i hope your help friends.

my controller

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 /**
     * @Route("/search", name="search")
     */
     public function searchAction(Request $request){
        $user = new User();
 
             $searchTerm = $request->query->get('search');        
             $em = $this->getDoctrine()->getManager();
             $results = $em->getRepository(User::class)->findOneBy(['email' => $searchTerm]);
             //$results = $query->getResult();
 
             $content = $this->renderView('search.html.twig', [
                'res' => $results,
                'val' => $searchTerm
 
    ]);
 
    $response = new JsonResponse();
    $response->setData(array('list' => $content));
    return $response;
             }

my ajax script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
 
 $.ajax({
        type: "GET",
        url: "{{ path('search') }}",
        dataType: "json",
        data: {search: input},
        cache: false,
        success: function (response) {
               $('.example-wrapper').replaceWith(response);
               //$('.example-wrapper').load("{{ path('search') }}?search="+ $search.val());
                console.log(response);
                 },
        error: function (response) {
               console.log(response);
                   }
      });

the view : search.html.twig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
<form class="example-wrapper" role="search" method="post" action="{{ path('search') }}">
    <div>
        <input type="text" class="form-control" name="search" value="{{ val }}">
            <button type="submit" class="btn btn-success" name="sub">search</button>
    </div>
    </form>
 
    <div class="example-wrapper">
    {% for result in res %}
    <p style="display:inline-block;width:200px;">{{ result.fullname }}</p>
    <p style="display:inline-block;width:100px;">{{ result.username }}</p>
    <p style="display:inline-block;width:300px;">{{ result.email }}</p>
    <p style="display:inline-block;width:120px;">{{ result.roles[0] }}</p> 
    {% endfor %}
    </div>