Select2 – Ajax搜索 – 记住最后的结果

我正在使用Select2 3.5.1。 有了这个插件，我可以成功加载远程数据。 但是我今天在这里提出一个问题来改进这种搜索。 以下是逐步了解我想要做的事情：

1. 设置带有远程数据加载的Select2（使用ajax）。
2. 单击Select2输入并搜索某些内容。
3. 将显示加载，几秒钟后您将看到结果列表。
4. 单击列出的结果之一 – 结果框将消失。
5. 如果再次单击搜索框，则列表将为空，您需要再次键入一些新文本以获得结果列表。

是否有可能当我们再次点击搜索框时，先前搜索过的结果列表重新出现而没有任何ajax调用？ 然后，如果用户删除字符或更改其搜索条件，则它将再次触发ajax搜索。

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

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

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

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

非常简单的ajax.php调用：

  "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

我再次阅读了你的post。 我上次误解了你。

解决方案就在这里。

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