jQuery autocomplete: select Id from 'source' event

Question

Hi Gurus

I'm trying to apply jQuery UI autocomplete to three input boxes at the same time since the request and logic is almost the same, only one parameter changes between them.

Since I'm using a remote source that is being retrieved with ajax I'm trying to be able to know from which textbox the request was made.

As you can see in the 'switch' statement at the 'source' event I tried $(this).attr("id") but this doesn't work, it returns 'indefined'

I tried this because it worked on the 'select' and 'focus' events, but not on 'source'. I guess the way I'm using it I'm pointing to the 'source'

Does anyone know a way to know from which element was the event called in this case?

Thanks!!

$("#campo-categorias, #campo-tipos, #campo-colonias").autocomplete({
    minLength: 1,       
    delay: 100,
    source: function(request, response){
        var solicitud = new Object;

        switch ($(this).attr("id")){
            case "campo-categorias":
                solicitud.action    = 'get_categorias'; 
                break;
            case "campo-tipos":
                solicitud.action    = 'get_tipos_comida';   
                break;
            case "campo-colonias":
                solicitud.action    = 'get_colonias';   
                break;
        }           

        solicitud.consulta  = request.term;                     
        $.ajax({
            url: "wp-admin/admin-ajax.php",
            dataType: "json",
            data: solicitud,
            type: "POST",
            success: function(data){                                        
                response(data);
            }
        });
});

Answer 1

I think you are looking for this.element.attr("id") in your switch statement. That should work for finding the correct id.

Also, your code was missing a curly bracket, it should look like below:

 $("#campo-categorias, #campo-tipos, #campo-colonias").autocomplete({
    minLength: 1,       
    delay: 100,
    source: function(request, response){

        var solicitud = new Object;

        switch (this.element.attr("id")){

            case "campo-categorias":
                solicitud.action    = 'get_categorias'; 
                break;
            case "campo-tipos":
                solicitud.action    = 'get_tipos_comida';   
                break;
            case "campo-colonias":
                solicitud.action    = 'get_colonias';   
                break;
        }           

        solicitud.consulta  = request.term;       
        $.ajax({

            url: "wp-admin/admin-ajax.php",
            dataType: "json",
            data: solicitud,
            type: "POST",
            success: function(data){                                        
                response(data);
            }

        });

    }

 });