Jquery select2 custom javascript function when searching

Question

I have severall select2 in my page. I have a specific ajax engine and can't change it for many reasons. i would like to fill each select2 dropdown when the end-user type in the field, and use home made javascript to fill the "options" in the select2.

I've tried many different things found on the net, and can't find a working syntax for that.

For instance :

      jQuery("customer").select2({
          query: function (options) {
              alert('ok');
              // my ajax call would be here
              xajax_getCustomers(stringFilled);
          }
      });

i've tried with "ajax:" and several other things, i can't find how to trigger a javascript function when something filled. Important : i should be able to get the string filled, in order to pass it to my ajax call

Thanks for your help

select2.github.io/examples.html#data-ajax You don't need to make your custom function, select2 plugin comes with this feature integrated. — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Feb 17, 2016 at 8:43
I already saw those informations. But it's for a "standard" ajax call with JSON. this is not my case. i want to be able to call my own javascript function — Micbol12
– Micbol12, Commented Feb 17, 2016 at 10:02
I add an answer with that. Tell me if it solves your problem — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Feb 17, 2016 at 11:18

Marcos Pérez Gude · Accepted Answer · 2016-02-17 11:01:02Z

5

You have got this event:

  $(selector).on("select2-highlight", function(e) {
      console.log("highlighted val=" + e.val + " choice=" + e.choice.text);
  })

It's valid for a search event, so when select2-highlight event is fired means that user is searching for a string that you can manage with the e.val and e.choice.text values.

Unfortunatelly there's no strict search event, but you can bind the hided input text of the plugin with a on('keyup');

Something like this:

 $('input.select2-search__field').on('keyup', function() {
      alert($(this).val()); // it alerts with the string that the user is searching
 });

edited Feb 17, 2016 at 11:01

answered Feb 17, 2016 at 10:56

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Micbol12 Over a year ago

i've tried below code and this works, i get the string filled, BUT i don't know which select2 it refers to. any idea to know it ? jQuery(document).on("keyup",".select2-input", function (event) { alert(jQuery(this).val()); });

Marcos Pérez Gude Over a year ago

Change document with your selector. If you have a select with id="mySelect" this converts to: jQuery('#mySelect').on('keyup', '.inputclass', .... );

Micbol12 Over a year ago

doesn't work if i put the select id instead of document.

Marcos Pérez Gude Over a year ago

not the <select> id, I reffer to <div class="select2 ... " id="mySelect">

Micbol12 Over a year ago

Then i probably have another problem : i do it with a classical select, but it doesn't work if i use a simple div instead. If i do : jQuery("#customer").select2(); i receive an error "Uncaught query function not defined for Select2 customer" (jquery 3.5.2) Then i'm stuck...

|

Collectives™ on Stack Overflow

Jquery select2 custom javascript function when searching

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related