How to send onkeyup input to symfony controller

Question

I'm using tetranz/select2entity-bundle to impliment Select2 with Symfony2

So my form became like that:

 $builder->add('nom', Select2EntityType::class, [

        'remote_route' => 'find_tags',
        'class' => 'Emploi\AppBundle\Entity\Tags',
        'primary_key' => 'id',
        'text_property' => 'name',
        'minimum_input_length' => 2,
        'page_limit' => 10,
        'allow_clear' => true,
        'delay' => 250,
        'language' => 'fr',
        'placeholder' => 'Select a tag',

    ])

My route:

find_tags:
    path:     /find_tags
    defaults: { _controller: EmploiAppBundle:Tags:findTags }

So now I need to search tags onkeyup I used in twig:

{{ form_start(form) }}
{{ form_widget(form.nom, {'attr': {'id': 'tagsID'}}) }}
{{ form_widget(form.score) }}
<input type="submit" value="Create"/>
{{ form_end(form) }}

My function in TagsController because select2entity-bundle need a JSON response with two attributes 'id' and 'text':

public function findTagsAction(Request $request)
{
    $data = $request->get('input');
    $em = $this->getDoctrine()->getManager();
    $query = $em->createQuery(''
        . 'SELECT c.id, c.name '
        . 'FROM EmploiAppBundle:Tags c '
        . 'WHERE c.name LIKE :data '
        . 'ORDER BY c.name ASC'
    )
        ->setParameter('data', '%' . $data . '%');
    $tags = $query->getResult();

    $arrayCollection = array();

    foreach($tags as $item) {
        $arrayCollection[] = array(
            'id' => $item['id'],
            'text' => $item['name']
        );
    }
    return new JsonResponse($arrayCollection);
}

And to send input value I used this ajax code:

$(document).ready(function(){
    $("#tagsID").on('keyup', function() { 
        var input = $(this).val(); 
        if ( input.length >= 2 ) {

        var data = {input: input};

        $.ajax({
            type: "POST",
            url: "{{ path('find_tags') }}",
            data: data, 
            dataType: 'json',
            timeout: 3000,
            success: function(response){
            },

        });
    }
});
});

The problem now that findTagsAction() always return all tags and didn't detect the input value.

I think that's null because always findTagsAction() return all result — Houssem Tayech, Feb 08 '17 at 16:26

score 0 · Answer 1 · answered Feb 08 '17 at 20:32

 function goToUrl(id_to_send) {
      var path="{{ path('players_team', { 'id':"PLACEHOLDER"  }) }}";
        var url =  path.replace("PLACEHOLDER", id_to_send);
     $.ajax({url: url, success: function(result){
    $("#players").replaceWith(result);
}});

}

you just need to call this mehode in onKeyUp method, in my case i retrieve the result and i replaced it with $("#players").

score 0 · Accepted Answer · answered Feb 08 '17 at 23:18

The solution was very simple, select2entity-bundle assign an id automatically to the form_widget that's why the javaScript can't find id="tagsID" so we need to remove this

{'attr': {'id': 'tagsID'}}

from this line:

{{ form_widget(form.nom, {'attr': {'id': 'tagsID'}}) }}

but the right way to add a CSS id to the form_widget on twig is:

{{ form_widget(form.nom, { 'id' : 'tagsID' }) }}

where ever, when i looked to the AJAX requests sent when typing on the text fields i found this GET method :

http://127.0.0.1:8000/find_tags?page_limit=10&q=xxx

So now we need to change in our controller this:

$data = $request->get('input');

By this:

$data = $request->get('q');

PS: Remove all the JavaScript written previously

How to send onkeyup input to symfony controller

2 Answers2