求一个select2 ajax请求后台数据搜索下拉框功能 并回显选中项的demo 20C

软件后台是java编写的
求一个select2 ajax请求后台数据搜索下拉框功能 并回显选中项的demo

https://www.cnblogs.com/-mrl/p/7650156.html
这个帖子我已经试过了 搜索功能失效 不要在推荐了

强调一下 是用ajax请求的数据 而不是用本地的方式注入

0

7个回答

 $('select').select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    data: function (params) {
      var query = { //请求的参数, 关键字和搜索条件之类的
        search: params.term //select搜索框里面的value
      }

      // Query paramters will be ?search=[term]&page=[page]
      return query;
    },
    delay: 1500,
    processResults: function (data, params) {
      //返回的选项必须处理成以下格式
      //var results =  [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

      return {
        results: results  //必须赋值给results并且必须返回一个obj
      };
    }

  }
});
0
u012503756
bulidfer 不行的 这个方法我也试过了
11 个月之前 回复

图片说明

这些都试了 不行的

 /* 1-本地注入方式 */

        /*$(".downList2").select2({
            // $("select[name='xuewei_id']").select2({
            // $('select[id="xuewei_id"]').select2({
            // $('#xuewei_id').select2({

            placeholder : "请至少选择一个人名",
            tags : true,
            createTag : function(decorated, params) {
                return null;
            },
            width : '256px',

        });*/
        // 2- AJAX获取数据方式
      $(".downList2").select2({
          ajax: {
            type:'GET',
            url: 'http://localhost:8080/erzhentang/manage/forAjax.do?requestType=12.5_1',
            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;
              var itemList = [];
              var arr = data.result.list
              for(item in arr){
                  itemList.push({id: item, text: arr[item]})
              }
              return {
//              results: data.items,//itemList
                results: data,//itemList
                pagination: {
                  more: (params.page * 2) < data.total_count
                }
              };
            },
            cache: true
          },
          placeholder:'请选择',//默认文字提示
          language: "zh-CN",
          tags: true,//允许手动添加
        createTag : function(decorated, params) {
            return null;
        },
          allowClear: true,//允许清空
          escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
          minimumInputLength: 0,
          formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
          formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
        });

0

$("#select2").select2({
placeholder: "请选择",
language: "zh-CN",
ajax: {
url: "apiurl",//接口地址
dataType: 'json',
delay: 250,
data: function (params) {
return {
search: params.term, // search term
};
},
processResults: function (data, params) {
var result = $.map(data.rows,
function (v, k) {
return { id: v.Id, text: v.Name };
});
return {
results: result
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // 字符转义处理
minimumInputLength: 1,
templateResult:function (repo) {
if (repo.loading) {
return repo.text;
}
return repo.text;
},
templateSelection: function (repo) { return repo.text }
});

0

图片说明

0
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>select2</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- select2 style --> 
    <link rel="stylesheet" href="select2.min.css">
      <script src="select2.full.min.js"></script>

  </head>

  <body class="hold-transition skin-blue sidebar-mini" style="background-color:#ecf0f5;">
    <!-- Main content -->
    <section class="content container" style="margin-top: 15px;">
        <div class="col-sm-4">
            <h3>本地数据方式</h3>
            <select class="form-control input-sm downList1">
                <option></option>
            </select>
            <p class="p1"></p>
            <hr>
            <button type="button" class="btn btn-sm btn-primary" id="one">click</button>
        </div>
        <div class="col-sm-4">
            <h3>AJAX获取数据方式</h3>
            <select class="form-control input-sm downList2" multiple>
                <option></option>
            </select>
            <p class="p2"></p>
            <hr>
            <button type="button" class="btn btn-sm btn-primary" id="two">click</button>
        </div>
        </section><!-- /.content -->



  </body>
  <script>
    //one  本地数据方式
    var dataList = [
            { id: 0, text: 'enhancement' }, 
            { id: 1, text: 'bug' }, 
            { id: 2, text: 'duplicate' }, 
            { id: 3, text: 'invalid' }, 
            { id: 4, text: 'wontfix' }
          ];
    $(".downList1").select2({
        data: dataList,
        placeholder:'请选择',//默认文字提示
        language: "zh-CN",
        allowClear: true//允许清空
    })
    $('#one').click(function(){
        var id = $(".downList1").select2("data")[0].id;
        var text = $(".downList1").select2("data")[0].text;
        var html = '您选择了:' + '{ id:' + id + ', ' + 'text: ' + text + ' }';
        $('.p1').text(html);
    })
    //two  AJAX获取数据方式
    $(".downList2").select2({
      ajax: {
        type:'GET',
        url: 'data.php',
        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;
          /*var itemList = [];
          var arr = data.result.list
          for(item in arr){
              itemList.push({id: item, text: arr[item]})
          }*/
          return {
            results: data.items,//itemList
            pagination: {
              more: (params.page * 2) < data.total_count
            }
          };
        },
        cache: true
      },
      placeholder:'请选择',//默认文字提示
      language: "zh-CN",
      tags: true,//允许手动添加
      allowClear: true,//允许清空
      escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
      minimumInputLength: 0,
      formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
      formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
    });
    $('#two').click(function(){
        var userList = $(".downList2").select2("data");
        var user = [];

        for(var i=0;i<userList.length;i++){
            user.push(userList[i].id)
        }
        $('.p2').text(user);
    })
  </script>

</html>
0

我写了一个test 感觉跟你代码一样 没什么问题 是不是你其他地方的问题 你可以下载看看

https://pan.baidu.com/s/1W1te6rWD1WLv-FKMZNzMOw

0

插件 jQuery autocomplete

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!