select2 ajax web项目中的实用经验



一、jsp页面    

<label class="col-md-2 control-label">动态表单:</label>
     <div class="col-md-4">
      <input  class="form-control" id="dynamicPageId"
        type="text" placeholder="" name="dynamicPageId" value="${vo.dynamicPageId}"/>
     </div>

二、javascript

$("#dynamicPageId").select2({
                  placeholder: "查找动态页面",
                  minimumInputLength: 1,
                allowClear :true,//自动清理
                  ajax: {
                      url: "<%=basePath%>dev/dynamicPageAjaxQuery.do",
                      dataType: 'json',
                      quietMillis: 1000,
                      data: function (term, page) {
                          return {
                           pageName: term, //查询条件
                          };
                      },
                      results: function (data, page) {
   
                          return { results: data};
                      },
                      cache: true
                  },
              
                  initSelection: function(element, callback) {//初始化函数
                   var id = $(element).val();//绑定的元素
                   if(id != ""){
                    $.ajax("<%=basePath%>dev/dynamicPageAjaxQuery.do", {
                                 data: {dynamicPageId: id},//ID
                                  dataType: "json"
                             }).done(function(data) {
                                 callback(data[0]);
                             });
                   }
                  },
                  formatResult: repoFormatResult,
                  formatSelection: repoFormatSelection, 
                  dropdownCssClass: "bigdrop",
                  escapeMarkup: function (m) { return m; }
              });

function repoFormatResult(repo) {//下拉框显示
               var markup = '<div>' + repo.name + '</div>';
                  return markup;
      
               }

               function repoFormatSelection(repo) {//选中的结果
                   return repo.name;
               }

三、效果图