Question

我正在尝试将Select2插件与CodeIgniter框架结合使用。经过大量的努力，我设法让它与AJAX数据一起工作。但是，现在它有一个奇怪的问题。即使在输入整个名称后，该插件也不会消除与搜索词不匹配的无关选项。

以下屏幕截图描述了这一点。

http://i.imgur.com/MfLcuf6.jpg?1

Firebug控制台如下所示：

http://i.imgur.com/Qvko6mX.jpg

下面是我的Javascript代码以及我的控制器的代码

使用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 };
        }
    }
});

控制器

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);
}

我对可能导致问题的原因感到困惑。我也试过这里列出的解决方案link，但无济于事。任何帮助将不胜感激。

根据请求更改了AJAX调用参数，但输出保持不变......

$("#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

您在data部分缺少ajax个功能。请参阅Loading Remote Data中的Infinite Scroll with Remote Data和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};
    }
}

Answer 2

您没有正确使用ajax功能。它正在完成它应该做的事情，那就是显示从get_mentor_multi_list（）函数返回的所有数据。

为了正确执行此操作，您的ajax调用需要包含一个数据属性，该属性包含要发送到get_mentor_multi_list（）函数的参数。 get_mentor_multi_list（）将只返回用户正在查找的结果。

如果get_mentor_multi_list（）中的数据是静态的（即不从任何数据库读取），则应考虑将其添加到数据属性，如加载数组数据示例here中所示。

Answer 3

最后，我能够自己解决问题。问题在于我使用的是CodeIgniter。因此，应该通过AJAX调用的data属性传递的任何变量实际上都没有传递给控制器。

我通过将Javascript代码更改为以下内容来解决此问题：

<强>的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
            };
        }
    }
});

控制器代码如下所示：

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);
}

Select2插件不会根据输入消除选项

3 个答案: