Knockoutjs+select2 人员搜索功能代码分享

本文摘自PHP中文网，作者巴扎黑，侵删。

<select class="form-control PersonEmail" id="txtProjectManager" data-bind="options:{text:ICVInfo.ProjectManager,value:ICVInfo.ProjectManager},optionsText:'text',optionsValue:'value',value:ICVInfo.ProjectManager" ></select>

javascript:

$('.PersonEmail').select2({
"separator": ",",
"maximumSelectionSize": 10,
"placeholder": "请选择用户",
"allowClear": false,
"maximumInputLength": 100,
"minimumResultsForSearch": "2",
"tags": false,
templateResult: function (repo) {
markup = repo.text;
return markup;
},
escapeMarkup: function (markup) { return markup; },
templateSelection: function (repo) {
return repo.text;
},

ajax: {
@*url: '@Url.Action("SelectUser", "CommercialReminder")', dataType: 'json', data: function (params) {*@
url: 'SelectUser',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;

return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: false,
type: 'post'
},
initSelection: function (element, callback) {
if (element.val() != null) {
var data = { id: element.val(), text: element.val() };
//alert(data.id);
callback(data); //这里初始化
}
}
})

目前只适合单选，多选目前还在配置，等测试通过后会继续放上来。

以上就是Knockoutjs+select2 人员搜索功能代码分享的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

js 闭包的作用是什么？

http协议发展过程一览

js中怎么写正则表达式

给大家分享九个 javascript 图片懒加载库

一纸搞懂js系列（1）之编译原理，作用域，作用域链，变量提升，暂时性死区

vue访问元素和组件的方法（附示例）

bootstrap和react的区别是什么？

javascript如何使网页跳转

javascript如何调用函数

canvas的手绘风格图形库rough.js

更多相关阅读请进入《Knockoutjs+select2》频道 >>

书籍

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元   人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » Knockoutjs+select2 人员搜索功能代码分享