当前位置:首页 > HTML5教程 > HTML5高阶

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

 

HTML:

 <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); //这里初始化
                   }
               }
           })

 

 

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

 【说明】本文章由站长整理发布,文章内容不代表本站观点,如文中有侵权行为,请与本站客服联系(QQ:254677821)!