Select2 Plugin not eliminating options based on input

Question

I am trying to work with the Select2 plugin in conjunction with the CodeIgniter framework. After a lot of effort, I managed to get it to work with AJAX data. However, now it has a weird problem. Even after typing in the entire name, the plugin does not eliminate the irrelevant options that do not match with the search term.

The below screenshot depicts this.

https://i.sstatic.net/mwesA.jpg

The Firebug console looks like this:

https://i.sstatic.net/3iSjI.jpg

Below is my the Javascript code as well as the code for my controller

Javascript:

$("#mentor-typeahead").select2({
    width: "100%",
    placeholder: "Enter a mentor name",
    maximumSelectionSize: 5,
    minimumInputLength: 2,
    multiple: true,
    ajax: {
        url: 'get_mentor_multi_list',
        quietMillis: 500,
        cache: true,
        dataType: 'json',
        results: function (data) {
            return { results: data };
        }
    }
});

Controller

function get_mentor_multi_list($query = null)
{
    $answer = array(array('id'=>1, 'text'=>'Inigo Montoya'),
                    array('id'=>2, 'text'=>'Zoey Deschanel'),
                    array('id'=>3, 'text'=>'Harry Potter'),
                    array('id'=>4, 'text'=>'Nicole Scherzinger'),
                    array('id'=>5, 'text'=>'Xerxes Mistry'),
                    array('id'=>6, 'text'=>'Tom Marvollo Riddle'),
                    array('id'=>7, 'text'=>'Light Yagami'),
                    array('id'=>8, 'text'=>'Vic Mackey'),
                    array('id'=>9, 'text'=>'Clark Kent'));

    echo json_encode($answer);
}

I am utterly confused as to what could be causing the problem. I also tried the solution listed here link but to no avail. Any help would be appreciated.

Changed the AJAX call parameters on request but the output remains the same...

$("#mentor-typeahead").select2({
        width: "100%",
        placeholder: "Enter a mentor name",
        maximumSelectionSize: 5,
        minimumInputLength: 2,
        multiple: true,
        ajax: {
            url: 'get_mentor_multi_list',
            quietMillis: 200,
            dataType: 'json',
            data: function (term, page) {
                return {
                              q: term,
                              page_limit: 10
                            };
                   },
            results: function (data, page) {
                return data;
            }
        }

Answer 1

Finally, I was able to resolve the problem by myself. The problem lay in the fact that I was using CodeIgniter. Hence whatever variables that were supposed to be passed through the data attribute of the AJAX call weren't actually being passed to the controller.

I resolved this by changing the Javascript code to the following:

JavaScript

    $('#mentor-typeahead').select2({
    width: "100%",
    placeholder: "Enter a mentor name",
    maximumSelectionSize: 5,
    minimumInputLength: 2,
    multiple: true,
    ajax: {
        url: 'get_mentor_multi_list',
        quietMillis: 200,
        dataType: 'json',
        data: function (term, page) {
            return {
                searchq: term       // set the search term by the user as 'searchq' for convenient access
            };
        },
        results: function (data, page) {
            return {
                results: data
            };
        }
    }
});

And the controller code to look something like the following:

function get_mentor_multi_list()
{
    // model code

    $query = trim($_GET['searchq']);    // get the search term typed by the user and trim whitespace

    if(!empty($query))
    {
        // retrieve data from database
    }
    else
    {
        $answer = array('id' => 0, 'text' => 'No results found');
    }

    echo json_encode($answer);
}

Answer 2

You're not using the ajax function correctly. It's doing exactly what it's supposed to do and that is to display all of the data returned from your get_mentor_multi_list() function.

In order to do this correctly, your ajax call needs to include a data attribute that includes parameters to be sent to your get_mentor_multi_list() function. get_mentor_multi_list() will then return only the results that your user is looking for.

If the data in get_mentor_multi_list() is static (i.e. not read from any database), you should consider adding it to the data attribute like in the Loading Array Data example here.

Answer 3

You're missing a data function in the ajax part. See Loading Remote Data and Infinite Scroll with Remote Data in the documentation.

ajax: {
    url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
    dataType: 'jsonp',
    quietMillis: 100,
    data: function (term, page) { // page is the one-based page number tracked by Select2
        return {
            q: term, //search term
            page_limit: 10, // page size
            page: page, // page number
            apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
        };
    },
    results: function (data, page) {
        var more = (page * 10) < data.total; // whether or not there are more results available

        // notice we return the value of more so Select2 knows if more results can be loaded
        return {results: data.movies, more: more};
    }
}