Select2 - Ajax搜索 - 記住最后的結果

Question

我正在使用Select2 3.5.1。 有了這個插件，我可以成功加載遠程數據。 但是我今天在這里提出一個問題來改進這種搜索。 以下是逐步了解我想要做的事情：

設置帶有遠程數據加載的Select2（使用ajax）。
單擊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);

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

Select2 - Ajax搜索 - 記住最后的結果

問題描述

1 個解決方案

解決方案1
10 已采納 2014-10-20 13:33:22

Select2 - Ajax搜索 - 記住最后的結果

問題描述

1 個解決方案

解決方案1 10 已采納 2014-10-20 13:33:22

解決方案1
10 已采納 2014-10-20 13:33:22