我正在使用Select2 3.5.1。使用此插件,我可以成功加载远程数据。但是,我今天在这里问一个问题,以改善这一搜索条件。这是逐步了解我想做的事情:
当我们再次单击搜索框时,是否有可能重新出现以前搜索的结果列表而没有任何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);
我确实再次阅读了您的帖子。我上次误会了你。
解决方案在这里。
$(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(); }); });