Select2 - Ajax 搜索 - 记住最后的结果答案

【问题标题】：Select2 - Ajax search - remember last resultsSelect2 - Ajax 搜索 - 记住最后的结果
【发布时间】：2014-12-15 12:03:47
【问题描述】：

我正在使用 Select2 3.5.1。使用此插件，我可以成功加载远程数据。但是，我今天在这里提出一个问题以改进此搜索。以下是了解我想要做什么的分步说明：

使用远程数据加载（使用 ajax）设置 Select2。
单击 Select2 输入并搜索内容。
会出现加载，几秒钟后您会看到结果列表。
单击列出的结果之一 - 结果框随即消失。
如果您再次单击搜索框，列表将为空，您需要再次键入一些新文本才能获得结果列表。

是否有可能当我们再次单击搜索框时，先前搜索的结果列表会重新出现而无需任何 ajax 调用？然后，如果用户删除一个字符或更改他的搜索条件，它会再次触发 ajax 搜索。

如果可能，我们将如何编码？

希望我的问题很清楚，如果您有任何问题，请告诉我。谢谢。

这是一个非常简单的代码，我们在其中进行搜索以返回结果列表。它并没有真正进行搜索，但是当您键入内容时它会返回一个列表。我不确定如何使用其中一个响应中提到的 initSelection。

<html>
<head>
    <title>
        Test page for ajax cache
    </title>
    <script type='text/javascript' src='../../resources/javascript/jquery/jquery-1.9.1.min.js'></script>
    <link type='text/css' href='../../resources/javascript/select2/select2.css' rel='stylesheet' />
    <script type='text/javascript' src='../../resources/javascript/select2/select2.js'></script>

    <script>
    $(document).ready(function(){
        $('#select').select2({
            ajax: {
                type: 'POST',
                url: 'ajax.php',
                dataType: 'json',
                data: function(term, page){
                    return {
                        autoc: 'country',
                        term: term
                    }
                },
                results: function(data, page){
                    console.log(data);

                    return( {results: data.results} );
                }
            },
            placeholder: 'Search something',
            minimumInputLength: 3,
            width: '333'
        });
    });
    </script>
</head>

<body>
    <input type='text' name='inputdata' id='select' />
</body>
</html>

非常简单的ajax.php调用：

<?php
$results2['more'] = false;
$results2['results'][0] = array('id'=> "1", 'text'=> "California");
$results2['results'][1] = array('id'=> "2", 'text'=> "Canada");
$results2['results'][2] = array('id'=> "2", 'text'=> "Someword");
$results2['results'][3] = array('id'=> "2", 'text'=> "Alberta");
$results2['results'][4] = array('id'=> "2", 'text'=> "New York");

echo json_encode($results2);

【问题讨论】：

标签： javascript jquery ajax jquery-select2

【解决方案1】：

我确实再次阅读了您的帖子。上次误会你了。

解决方案就在这里。

   $(document).ready(function () {
        $('#select').select2({
            // this part is responsible for data caching
            dataCache: [],
            query: function (q) {
                var obj = this,
                        key = q.term,
                        dataCache = obj.dataCache[key];

                //checking is result in cache
                if (dataCache) {
                    q.callback({results: dataCache.results});
                } else {
                    $.ajax({
                        url: 'ajax.php',
                        data: {q: q.term},
                        dataType: 'json',
                        type: 'POST',
                        success: function (data) {
                            //copy data to 'cache'
                            obj.dataCache[key] = data;
                            q.callback({results: data.results});
                        }
                    })
                }
            },
            placeholder: 'Search something',
            width: '333',
            minimumInputLength: 3,
        });
        // this part is responsible for setting last search when select2 is opening
        var last_search = '';
        $('#select').on('select2-open', function () {
            if (last_search) {
                $('.select2-search').find('input').val(last_search).trigger('paste');
            }
        });
        $('#select').on('select2-loaded', function () {
            last_search = $('.select2-search').find('input').val();
        });
    });

【讨论】：

我添加了一些示例代码。我不确定如何将 initSelection 用于我想做的事情。谢谢。
有机会获得 4.0 版的此代码吗？谢谢

【解决方案2】：

这将进行另一个 ajax 调用，但使用与以前相同的查询字符串。使用事件 select2:closure 保存最后一个查询字符串，使用 select2:open 将字符串插入搜索输入并触发输入事件。

var lastQueryString = '';

jQuery(".my-select2").select2({
    minimumInputLength: 2,
    placeholder: "Select an option",
    ajax: {
        url: "/example",
        data: function (params) {
            var query = {
                search: params.term
            }
            return query;
        },
        processResults: function (data) {
            return {
                results: JSON.parse(data)
            };
        }
    }
});

jQuery('.my-select2').on('select2:open', function () {
    if (lastQueryString) {
        jQuery('.select2-search').find('input').focus().val(lastQueryString).trigger('input');
    }
});

jQuery('.my-select2').on('select2:closing', function () {
    lastQueryString = jQuery('.select2-search').find('input').val();
});

【讨论】：