multiple select2内置ajax方法的正确使用

场景

网站中很多在select比较多的时候,经常是需要使用select2的,
而在option比较多的时候, 则是必须使用的了。

分析

1.  select2内置了ajax方法,这个方法会调用jQ的$.ajax对象,而$ajax参数则是由ajax选项提供
2.  在用户被点击select2发送request 请求
3.  每次键入搜索关键词的时候也会发送请求
4.  默认传递参数 term~~搜索的关键词

select的option只会在该option被选中之后创建,这样可以提高性能。
即使是之后的select之后发生了变化,被创建的option也会一直存在

引入

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="https://cdn.bootcss.com/select2/4.0.6-rc.1/js/i18n/zh-CN.js"></script>

参考文献

简单用法 https://select2.org/data-sources/ajax
配置下项 https://select2.org/configuration/options-api

用法

下面的例子总结
1.   url   string  请求地址
2.  data  object  发送的参数,(列子是匿名函数加工过的对象)
3. processResults   function  对返回值进行处理
4. page  select2 支持分页,  （为laravel打call） 但是select2 需要服务端返回`pagination.more` 属性(true or false)
   告知select2 是不是有更多值去请求, 理想的数据是下面那样的;
   当然如果是也可以利用 processResults 自己组装(page and size and total_size 直到这些值就足够了)
5.  delay  用户键入搜索词等待$delay毫秒发送请求， 这样可以确保用户已经完成关键词的输入
6.  凡是$.ajax 使用的option 都是可以被ajax使用的
7. minimumInputLength  integer 在填充n个字符后才开始搜索
8. placeholder 普通的占位提示符
9. tags  boolean |array 允许用户自己添加搜索项项目(当键入的搜索内容不存在的时候)
10. cache  ajax的配置项
11. templateResult callback 定制搜索框被加载的时候的伪option的样式
12. templateSelection  callback  定制在option在被用户选中的时候option怎么展示 
     很重要的一种使用
     function(topic) {
     return topic.name || topic.text; //如果有返回则 使用搜索到的数据，如果没有的话 则使用
     }

// pagination.more 期望数据如下
{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
  ],
  "pagination": {
    "more": true
  }
}
// 自己整理成select2 需要的格式
    processResults: function (data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },

$('#mySelect2').select2({
ajax: {
url: 'https://api.github.com/orgs/select2/repos',
data: function (params) {
    var query = {
    search: params.term,
    type: 'public',
    page: params.page || 1
    }，
        // Query parameters will be ?search=[term]&type=public&page=[page]
    return query;
    }
},
processResults: function (data) {
      // Tranforms the top-level key of the response object from 'items' to 'results'
      return {
        results: data.items
      };
 },
 delay: 250 //wait 250 milliseconds before triggering the request
});

实例

@extends('layouts.app')

@section('content')
    <div class="container">
        @include('vendor.ueditor.assets')
        <style>
            .panel-body img {
                width: 100%;
            }
        </style>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif
                    <div class="panel-heading">发布问题</div>
                    {!! Form::open(['url'=> '/Question/store', 'method' => 'post']) !!}

                    <div class="panel-body">
                        <div class="form-group {{ $errors->has('title') ? ' has-error' : '' }}">
                            {!! Form::label('title', '标题') !!}
                            {!! Form::text('title', old('title'), ['class' => 'form-control', 'placeholder' => '请填写标题']) !!}
                            @if ($errors->has('title'))
                                <span class="help-block">
                                        <strong>{{ $errors->first('title') }}</strong>
                                    </span>
                            @endif
                        </div>

                        <div class="form-group">
                            {!! Form::label('topic', '话题') !!}
                            <select class="js-example-basic-multiple form-control" id="topic" name="topic[]" multiple="multiple">
                            </select>

                        </div>

                        <div class="form-group {{ $errors->has('body') ?  'has-error' : '' }}">
                            <script id="container" name="body" style="height: 300px" type="text/plain"> {{ old('body') }} </script>
                            @if($errors->has('body'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('body') }}</strong>
                                </span>
                            @endif
                        </div>

                        <div class="form-group">
                            {!! Form::submit('发布', ['class' => 'btn btn-sm btn-success pull-right']) !!}
                        </div>
                        {!! Form::close() !!}
                    </div>
                    {{-- begin --}}

                        <div class="select2-result-repository clearfix">
                            <div class="select2-result-repository_meta">
                                <div class="select2-result-repository_title">
                                </div>
                            </div>
                        </div>

                    {{-- end --}}


                </div>
            </div>
        </div>
    </div>

    <!-- 实例化编辑器 -->
    <script type="text/javascript">

        $(function () {
            // var ue = UE.getEditor('container');
            var ue = UE.getEditor('container', {
                toolbars: [
                    ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'insertimage', 'fullscreen']
                ],
                elementPathEnabled: false,
                enableContextMenu: false,
                autoClearEmptyNode: true,
                wordCount: false,
                imagePopup: false,
                autotypeset: {indent: true, imageBlockLine: 'center'}
            });
            ue.ready(function () {
                ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
            });

            // topic select2
            var url_topic = '/api/topics';
            $('.js-example-basic-multiple').select2({
                ajax: {
                    url: url_topic,
                    dataType: 'json', // 返回数据的格式
                    cache:true,
                    data: function (params) {
                        return { search: params.term };
                    },
                    processResults: function (data, params) { // select 要求返回格式必须含有 results属性
                        return {
                            results: data
                        };
                    },
                },
                // minimumInputLength:1,
                delay: 250, // 延迟发送请求
                placeholder: '选择相关话题', // 占位符
                tags : true, // 允许客户键入搜索内容
                templateResult :formatTopic, // 定制搜索框被加载的时候的伪option的样式
                templateSelection : formatToSelection,//定制在option在被用户选中的时候option怎么展示
                escapeMarkup : function (markup) {
                    return markup;
                }

            });
        });

        // topic展示元素的定制
        function formatTopic(topic) {
            return topic.name;
        }

        function formatToSelection(topic) {
            return topic.name || topic.text; //如果有返回则 使用搜索到的数据，如果没有的话 则使用输入值
        }
    </script>
@endsection