How to use jquery-select2 context parameter to refine search results?

[DaveH71]

Apologies all for what is probably something I should be able to work out for myself rather than bothering you guys with, in fact I'm fairly certain it is - my (poor) understanding of the docs leads me to believe this is probably trivial, but I am very new to this, under a fair amount of pressure, and for all my staring at it I just cannot connect the dots....

Basically I have the following simple ajax based select2 input field working :

$(document).ready(function () {

    var allUsersUrl = '/cmd/match_list/usrname';

    $('#username').select2({
        placeholder: 'Enter username',
        minimumInputLength: 3,
        allowClear: true,
        ajax: {
            quietMillis: 150,
            url: allUsersUrl,
            dataType: 'json',
            data: function (term, page) {
                return {
                    string: term,
                };
            },
            results: function (data, page) {
                return { results: data.Results };
            }
        }
    });
}
.
.
.
<input type="hidden" id="username" name="username">

...but since this involves a relatively slow and expensive back end LDAP query, I would like any subsequent key presses received after the first LDAP lookup to search the initial results, instead of firing off another brand new (but very similar) back end lookup.

For example, when I type 'smi' in the field, a shortlist of 52 matches is shown. When I then press 't' I want to look for 'smit' in the shortlist, and not do another back end lookup as currently happens.

The documentation talks about a 'context' parameter that sounds very relevant to my problem, but I just cant seem to get my head around it enough to make anything work, and so far I have failed to find any examples of other people doing something similar.

Any suggestions will be gratefully received, and apologies again if this doesnt belong in this forum. Thanks in advance.

[Kevin Brown]

The current query function for dealing with AJAX data is fairly complex, but can be overridden [1].  You may be able to override it globally by changing `window.Select2.query.ajax`, but most likely you will need to swap it out when initializing the Select2.  If you can't override it globally (you likely can't, but it's worth a shot), then you will need to rewrite the `query` option when initializing your Select2 [3].

The general idea is that you are going to need to have a flag that is set after the first request finishes that prevents any further requests from finishing.  You are also going to need to cache the results, so future calls to the query function will filter only on those results.

If you are still having problems after giving that a shot, can you include what you've tried?

[1]: https://github.com/ivaynberg/select2/blob/0636e42cbc5520f1b37f032a404c3e521b0eda3d/select2.js#L418-L466

[2]: https://github.com/ivaynberg/select2/blob/0636e42cbc5520f1b37f032a404c3e521b0eda3d/select2.js#L3363

[3]: http://ivaynberg.github.io/select2/#doc-query

[DaveH71]

Thats great, thanks for taking the time to reply Kevin, it is much appreciated.....but I'm afraid to say, poorly understood! Perhaps I should have explained that I am quite new to javascript/jquery, and so was going down the plugin route because I was under the (flawed?) impression that it would be the easiest and quickest path to where I need to get to.

It sounds like this problem is a lot more complicated than I had thought, and that I have misunderstood the docs, especially around the context parameter. I am struggling to work out how to even get started with the pointers you've given me but thats purely down to my own incompetence, so thanks again but I think I'm going to have to come at this again from a completely different angle.