标签：注意 arc ajax 多少 刷新 需要 优化 默认 select2
今天在优化项目当中，有个要在下拉框中搜索数据的需求；最后选择使用selec2进行开发：
官网：http://select2.github.io/
演示：
准备工作：
文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上
注意：最新版本的select2如果引用的jquery版本较低的话，某些功能无法正常使用。
HTML代码
<select id="c01-select" class="select2" name="search" style="width:200px"></select>
数据要求
var data = [{ id: 0, text: ‘enhancement‘ }, { id: 1, text: ‘bug‘ }, { id: 2, text: ‘duplicate‘ }, { id: 3, text: ‘invalid‘ }, { id: 4, text: ‘wontfix‘ }];JS代码
$(function () { var select2 = $("#c01-select").select2({ ajax: { url: "URL", dataType: ‘json‘, delay: 250, data: function (params) { return { eps400: params.term }; }, processResults: function (data) { return { results: data //必须赋值给results并且必须返回一个obj，否则会报错； }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 1, placeholder: ‘请选择‘, })
//用于数据回显 var search = "${param.search}";//后台搜索或者编辑返回的数据 if(‘‘ != search){ $("#c01-select").append(new Option(search, search, false, true));//第一个参数时id,第二个参数是text $("#c01-select").trigger("change"); } })
说明：
1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:‘person‘）
2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）
3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。
4.escapeMarkup字符转义处理
5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等
6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}
7.关于返回的 json的格式：select2默认json格式为[{id:1,text:‘text‘},{id:2,text:‘text‘}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:‘text‘,name:‘liu‘}]
标签：注意 arc ajax 多少 刷新 需要 优化 默认 select2
原文地址：https://www.cnblogs.com/hhwww/p/10844963.html
