Select2 - Ajax 搜索 - 记住最后的结果
Posted
技术标签:
【中文标题】Select2 - Ajax 搜索 - 记住最后的结果【英文标题】：Select2 - Ajax search - remember last results 【发布时间】：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);
【问题讨论】：
【参考方案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();
);
【讨论】：
以上是关于Select2 - Ajax 搜索 - 记住最后的结果的主要内容，如果未能解决你的问题，请参考以下文章
Select2 通过 AJAX 加载 JSON 结果集并在本地搜索
如果搜索文本只是空格，则 Select2 不应发送 ajax。如何做到这一点？