0

我正在尝试将 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);
}

我对可能导致问题的原因感到非常困惑。我也尝试了此处列出的解决方案链接，但无济于事。任何帮助，将不胜感激。

根据请求更改了 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;
            }
        }
4

3 回答 3

1

您缺少零件data中的功能ajax。请参阅文档中的加载远程数据和使用远程数据无限滚动。

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};
    }
}
于 2013-09-24T08:35:19.120 回答
0

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

我通过将 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);
}
于 2013-09-25T08:43:53.620 回答
0

您没有正确使用 ajax 函数。它正在做它应该做的事情，那就是显示从 get_mentor_multi_list() 函数返回的所有数据。

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

如果 get_mentor_multi_list() 中的数据是静态的（即不从任何数据库中读取），您应该考虑将其添加到 data 属性中，就像这里的加载数组数据示例一样。

于 2013-09-24T08:38:41.710 回答