JQuery autocomplete select event not fired

Question

I try to make an autocomplete input, as I did sometimes in the past. But today I have to face a issue i can't really understand.

$( "#search_collab_autocomplete" ).autocomplete({
    appendTo :$('.form-add-new-user'),
    source : function(requete, response){
        $.ajax({
            url : $('.form-add-new-user').data('url'),
            dataType : 'json',
            data : {
                email : $('#search_collab_autocomplete').val(),
            },

            success : function(data){
                var arr = [];
                var i = 0;
                var fullObj = data;
                $.each(data, function(index, value){
                    var obj = {
                        id: index,
                        email: value,
                    };
                    arr[i] = obj;
                    i++;
                });
                response(arr, fullObj);
            },

            select: function( event, ui ) {
                console.log("hi");
            }
        });
    },
    minLength: 3
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" ).data("item.autocomplete", item)
        .append( "<a>"+item.email + "</a>")
        .appendTo( ul );
};

I have this code, which is partially workink because i can see list of result juste below my input field.

But when I click on / when I choose a item with keyboard I can't see nothing happening.. not even a simple console.log('hi');....

Am I using wrong select ?

Answer 1

Your "select" is attached to $.ajax. It must be on the same level as "source" and "minLength".