Until now I've been using Select2's normal AJAX method of searching and filtering data serverside, but now I have a usecase where I want to retrieve all the results via AJAX when the select is opened and then use those results (now stored locally) to search and filter.

I've trawled the web looking for examples of how to do this and all i've found is lots of people saying the Query method should be used rather than the AJAX helper. Unfortunately I haven't found any examples.

So far all I've managed is the basic:

$('#parent').select2({
  placeholder: "Select Parent",
  minimumInputLength: 0,
  allowClear: true,
  query: function (query) {
      //console.log(query);
      query.callback(data);
  }
});

data = {
 more: false,
 results: [
    { id: "CA", text: "California" },
    { id: "AL", text: "Alabama" }
 ]
}

Data is being passed to the select but query filtering is not implemented.

I'm struggling to understand the select2 documentation and would appreciate any assistance or links to examples.

Until now I've been using Select2's normal AJAX method of searching and filtering data serverside, but now I have a usecase where I want to retrieve all the results via AJAX when the select is opened and then use those results (now stored locally) to search and filter.

I've trawled the web looking for examples of how to do this and all i've found is lots of people saying the Query method should be used rather than the AJAX helper. Unfortunately I haven't found any examples.

So far all I've managed is the basic:

$('#parent').select2({
  placeholder: "Select Parent",
  minimumInputLength: 0,
  allowClear: true,
  query: function (query) {
      //console.log(query);
      query.callback(data);
  }
});

data = {
 more: false,
 results: [
    { id: "CA", text: "California" },
    { id: "AL", text: "Alabama" }
 ]
}

Data is being passed to the select but query filtering is not implemented.

I'm struggling to understand the select2 documentation and would appreciate any assistance or links to examples.

• javascript
• jquery
• ajax
• json
• jquery-select2

Share Improve this question Follow edited Aug 17, 2014 at 0:47 Tim asked Aug 16, 2014 at 7:44 TimTim 3,13199 gold badges5050 silver badges6565 bronze badges 2

• You'll have to implement the filter server-side as explained here: stackoverflow./questions/15232476/… – Kristian Hebert Commented Aug 16, 2014 at 7:50
• Hi Kristian, Thanks for your ment. I already have server filtering working with select2. Unfortunately for this particular use case server filtering is not an option and that is why I am pursuing client filtering. I know it can be done. – Tim Commented Aug 16, 2014 at 12:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try the following - pre-load json data into local variable and when ready bind this to select2 object

<script>
function format(item) { return item.text; }
var jresults;
$(document).ready(function() {
    $.getJSON("http://yoururl./api/select_something.json").done(
        function( data ) {
            $.jresults = data;
            $("#parent").select2(
                {formatResult: format,
                 formatSelection: format,
                 data: $.jresults }
            );
        }
    )
});
</script>