I've built a web-app using a Select2 search box, which connects to our backend via AJAX. The search box passes the query (say "APPLES") to the backend, which then updates the page. How do I programmatically inject search queries into the search box? I need to pass in the "val" so that select2 calls the backend via AJAX and updates the page. I'm sure this is obvious, but I couldn't find it in the documentation.
For example, instead of forcing a user to type "APPLES" into the search box, I would like the user to click a button and have the word "APPLES" automatically populated into the search field, and then have the page update.
Thanks!
Following Kevin's comment, I'm not in this state where the text is embedded in the searchbox and the selector has picked the correct item. How do I submit (or trigger) this request, I tried "keydown", "pressdown", "submit", "click" (which clears the box), etc.
When users filter down the results by entering search terms into the search box, Select2 uses an internal "matcher" to match search terms to results. You may customize the way that Select2 matches search terms by specifying a callback for the matcher configuration option.
trigger('change'); // manually trigger the `select2:select` event studentSelect. trigger({ type: 'select2:select', params: { data: data } }); }); Notice that we manually trigger the select2:select event and pass along the entire data object.
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Select2 used to provide a select2('search', 'term')
helper method that would have assisted with this, but it was not brought over to Select2 4.0.0.
There are a couple of ways that this could be done, but in general they all follow the same pattern of steps
input
)So, right now, in Select2 4.0.0 the code to do that would look like
$('select').select2(); function select2_search ($el, term) { $el.select2('open'); // Get the search box within the dropdown or the selection // Dropdown = single, Selection = multiple var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search; // This is undocumented and may change in the future $search.val(term); $search.trigger('keyup'); } $('button').on('click', function () { var $select = $($(this).data('target')); select2_search($select, 'Arizona'); });
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script> <select style="width: 200px;" id="single"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> <button type="button" data-target="#single">Search for 'Arizona'</button> <br /><br /> <select style="width: 200px;" id="multiple" multiple="multiple"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> <button type="button" data-target="#multiple">Search for 'Arizona'</button>
While this example does not use AJAX, it will trigger an AJAX request if Select2 is configured for it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With