passing parameters to jQuery's select2 ajax call

Question

I'm attempting to pass an extra parameter to an ajax call within select2:

  $(".auto-sug").select2({
    width:'element',
    minimumInputLength:2,
    ajax: {
        url: "/action/get-custom.php",
        data: function (term, page) {
          return {
              q: term, // search term
              page_limit: 10
          };
        },
        results: function (data, page) {
            return {results: data.stuff};
        }
    }
  });

I actually want to pass another parameter to the ajax call... the id of the element itself

<input type="text" class="auto-sug" name="custom" id="3383" />

however, I'm unable to figure out how to actually access the id of the element (3383) or any other value on the page.

Altamira

hi there. what is the .select2 method? does that actually work? is this what you are using? github.com/ivaynberg/select2/blob/master/select2.js – Dagney

yes. sorry. forgot to post the link to that. – Altamira

well, it looks like there is no native onChange event handler for this plugin...based on my quick review of the documentation: ivaynberg.github.com/select2/#documentation. the reason you can't get the id is because the select2 method needs a way to extract the id attribute when a value is selected. have you tried any other code yet? – Dagney

now that i think about it more, take the ajax method out of the constructor and do something like $(".auto-sug").on('change', function(){ var inputData = $(this).select2("data"); var inputId = $(this).prop('id'); put your ajax method in here with inputData and inputId}); – Dagney

Answer 1

Assuming there are multiple elements with class auto-sug, you could try something like this:

$(".auto-sug").each(function() {
    var thisId = this.id;
    $(this).select2({
        ...
        ajax: {
            ...
            id: thisId,
        },
    });
});

Something

How would you access any data attributes of the element? – Leptophyllous

Within the callback to .each(), you should be able to use $(this).data(key). – Something

Thank you, I had data-attributes which I couldn't pass. it always undestood the old one and I could't call like attr('data-attribute') so this is the best approach for my case. – Flawy

@sjy, thank you, an elegant solution. Took me a good two hours to find this thread. I had to use $( this ).attr( 'id' ) to get the id. – Sextillion

@Something Not worked, can you try to post the full example? Maybe something is missed. – Tycoon

Really nice!! Thank you @Something – Jerri

Answer 2

You should pass that extra parameter inside the data function instead of the root ajax, for it to execute each time you make a request:

ajax: {
    url: "/action/get-custom.php",
    data: function (term, page) {
      return {
          q: term, // search term
          anotherParm: whatEverValue, //Get your value from other elements using Query, for example.
          page_limit: 10
      };

Then for getting the id for the current select2 you could replace whateverValue with $(this).data(key)

This will result in a url to your endpoint of

/action/get-custom.php?q=term&anotherParm=whatEverValue&page_limit=10

Extortionary

Could you please update your answer showing where use $(this).data(key)? – Tycoon

This is actually quite helpful, but please update the answer with resulting query string: ?q=term&anotherParm=whatEverValu&page_limit=10 – Barde

This should be the approved answer; passing it within the data function makes the request run much faster. You can erase the option you've just made and make another selection in real time even when dealing with a huge dataset. – Babara

moving the anotherParm to the data function worked like a charm for me. When I read the accepted answer, while it worked for me, it didn't make sense for it to be there at least with what I was trying to accomplish (my use case wasn't exactly like the OP so take this comment with a grain of salt). – Folderol

Answer 3

You can add a new params here.

 data: function (params) {
        ultimaConsulta = params.term;
        localidad = $("#idOcultoLocalidad").val(); //this is the anotherParm
        return {
            criterio: params.term, // search term
            criterio2: localidad,
        };
    },

Petroglyph