select2 - 将获取远程数据与多个选择和预数据相结合
Posted
技术标签:
【中文标题】select2 - 将获取远程数据与多个选择和预数据相结合【英文标题】:select2 - combining getting remote data with muliple select and pre data 【发布时间】:2013-05-25 10:54:22 【问题描述】:您好,我希望使用选择 2,到目前为止我所看到的看起来不错。不过,我正在尝试做一件事。
我希望通过对 json 文件的 ajax 调用来获取我的数据 - 他们的网站上有一个关于如何执行此操作的示例,但我正在尝试创建一个预填充列表。
我的意思是当用户点击搜索此链接上的电影时
http://ivaynberg.github.io/select2/#infinite
json 文件中的前 10 部电影已列出,因此有一些预先选择。
谁能指出我正确的选择
这是我目前的代码
function movieFormatResult(movie)
var markup = "<table class='movie-result'><tr>";
if (movie.posters !== undefined && movie.posters.thumbnail !== undefined)
markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
if (movie.critics_consensus !== undefined)
markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
else if (movie.synopsis !== undefined)
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
markup += "</td></tr></table>"
return markup;
function movieFormatSelection(movie)
return movie.title;
$(document).ready(function()
$("#e7").select2(
placeholder: "More",
minimumInputLength: 3,
ajax:
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
quietMillis: 100,
data: function (term, page) // page is the one-based page number tracked by Select2
return
q: term, //search term
page_limit: 10, // page size
page: page, // page number
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
;
,
results: function (data, page)
var more = (page * 10) < data.total; // whether or not there are more results available
// notice we return the value of more so Select2 knows if more results can be loaded
return results: data.movies, more: more;
,
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
multiple: true,
escapeMarkup: function (m) return m; // we do not want to escape markup since we are displaying html in results
);
);
和html
<article class="row" id="infinite">
<div class="span12">
<p>
<input type="hidden" class="bigdrop" id="e7" style="width:200px"/>
</p>
</div>
</article>
【问题讨论】:
【参考方案1】:您可以将 minimumInputLength 参数设置为 0,然后它将尝试在没有搜索值的情况下查询您的 URL。然后设置您的服务器响应以在没有搜索字符串时返回 10 个选项。
【讨论】:
以上是关于select2 - 将获取远程数据与多个选择和预数据相结合的主要内容,如果未能解决你的问题,请参考以下文章
将 select2.js 与多个选择 optgroup 和 knockoutJS 一起使用
在 Select2 事件中获取选定的选项,当可以选择多个选项时