选择二 - 阿贾克斯搜索 - 还记得去年的结果 [英] Select2 - Ajax search - remember last results
问题描述
我使用的选择二3.5.1。有了这个插件，我可以成功加载远程数据。但是今天我在这里提出一个问题，以提高该搜索。这里是一步一步的来了解我想要做的：
- 设置一个选择二带（使用AJAX）的远程数据加载。
- 单击在选择二输入和搜索的东西。
- 在加载将出现，并在几秒钟后，你会看到一个结果列表。
- 点击列出的结果之一 - 结果的框，然后就会消失
- 如果您再次单击搜索框，列表将是空的，你需要再次键入一些新文本有一个结果列表。
是否有可能，当我们再次点击搜索框后，结果$ P $列表pviously搜索重新出现没有任何Ajax调用？然后，如果用户删除字符或改变他的搜索条件中然后将再次触发AJAX搜索。
如果有可能，我们将如何$ C c表示$？
我希望我的问题是清楚的，请让我知道，如果你有任何问题。谢谢你。
下面是一个非常简单的code，我们做搜索返回结果的列表。它并没有真正进行搜索，但的确，当你输入一些东西返回一个列表。我不知道如何使用是mentionned在响应之一initSelection。
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;
对于AJAX缓存测试页
＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC ='.. / .. /资源/使用Javascript / jQuery的/ jQuery的-1.9.1.min.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接类型=文本/ CSSHREF ='.. / .. /资源/ JavaScript的/选择2 / select2.css相对=样式/＆GT;
＆LT;脚本类型=文/ JavaScript的SRC ='.. / .. /资源/ JavaScript的/选择2 / select2.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（'＃选择）。选择二（{
AJAX：{
键入：POST，
网址：'ajax.php，
数据类型：JSON，
数据：功能（术语，页）{
返回 {
autoc：'国家'，
期限：长期
}
}，
结果：功能（数据页）{
的console.log（数据）;
返回（{结果：data.results}）;
}
}，
占位符：搜索的东西'，
minimumInputLength：3，
宽度：'333'
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;输入类型=文本名称='inputdata'ID =选择/＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
很简单的ajax.php名为：
＆LT; PHP
$结果2 ['更多'] = FALSE;
$结果2 ['结果'] [0] =阵列（'身份证'=＆gt;中1，文本=＆gt;中加州）;
$结果2 ['结果'] [1] =阵列（'身份证'=＆gt;中2，文本=＆gt;中加）;
$结果2 ['结果'] [2] =阵列（'身份证'=＆gt;中2，文本=＆gt;中Someword）;
$结果2 ['结果'] [3] =阵列（'身份证'=＆gt;中2，文本=＆gt;中亚伯）;
$结果2 ['结果'] [4] =阵列（'身份证'=＆gt;中2，文本=＆GT;纽约）;
回声json_en code（$结果2）;
我再次看了你的帖子。 我误解你最后一次。
解决的办法是在这里。
$（文件）。就绪（函数（）{
$（'＃选择）。选择二（{
//这部分是负责数据缓存
数据高速缓存：[]，
查询：函数（Q）{
VAR OBJ =这一点，
键= q.term，
数据高速缓存= obj.dataCache [关键];
//检查是导致缓存
如果（数据高速缓存）{
q.callback（{结果：dataCache.results}）;
} 其他 {
$阿贾克斯（{
网址：'ajax.php，
数据：{Q：q.term}，
数据类型：JSON，
键入：POST，
成功：功能（数据）{
//数据复制到高速缓存
obj.dataCache [关键] =数据;
q.callback（{结果：data.results}）;
}
}）
}
}，
占位符：搜索的东西'，
宽度：'333'，
minimumInputLength：3，
}）;
//这部分是负责制定上次搜索时选择二是开幕
VAR last_search ='';
$（'＃选择'）。在（选择2开'，函数（）{
如果（last_search）{
$（'。选择2搜索）找到（输入）VAL（last_search）.trigger（粘贴）。
}
}）;
$（'＃选择'）。在（选择2装'，函数（）{
。last_search = $（'。选择2搜索）找到（输入）VAL（）。
}）;
}）;
I am using Select2 3.5.1. With this plugin I can successfully load remote data. However I am here today to ask a question to improve this search. Here is the step-by-step to understand what I would like to do:
- Setup a Select2 with remote data loading (using ajax).
- Click on the Select2 input and search for something.
- The loading will appear and after some seconds you will see a list of results.
- Click on one of the results listed - the box of results will then disappear.
- If you click again on the search box, the list will be empty and you will need to type some new text again to have a list of results.
Is it possible that when we click again on the search box, that the list of results previously searched re-appear without any ajax call? Then if the user delete a character or change his search criteria it would then trigger the ajax search again.
If it is possible, how would we code that?
I hope my question is clear, please let me know if you have any questions. Thank you.
Here is a very simple code where we do a search that return a list of results. It doesn't really search, but it does return a list when you type something. I am not sure how to use the initSelection that is mentionned in one of the response.
<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>
The very simple ajax.php called:
<?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);
I did read your post once again. I misunderstood you last time.
The solution is here.
$(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();
});
});
这篇关于选择二 - 阿贾克斯搜索 - 还记得去年的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
