select2的使用和默认值设置，异步加载数据

前端数据展示使用select2显示代码：

<select id="organizer" name="organizer">

           <option value="{{ organizer.id }}" 
            {% if id|default('') == organizer.id %}selected="selected"{% endif %}>
                {{ organizer.name }}
            </option>

 </select>

<script>
　　$(document).ready(function () {
　　　　$("#organizer").select2();
　　});
</script>

异步加载数据代码：

##后端php代码：
    public function matchTeacherAction(Request $request,$orgCode)
    {
        $data = array();
        $queryString = $request->query->get('q');

        $users = $this->getLg001UserData($queryString);
        if($users){
            foreach ($users as $user) {
                $data[] = array('id' => $user['hk_uid'], 'name' => $user['name']);
            }
        }
        return $this->createJsonResponse($data);
    }
##前端html代码：
            <input type="text" id="teacher" name="teacher" class="width-full select2-offscreen" value="{{course.teacher|default('')}}" data-url="" data-init-url="" data-explain="{{ '输入用户姓名或手机号查询'|trans }}">

##前端js代码：
  const $teacher = $('#teacher');
  $teacher.select2({
    ### 异步加载数据项设置
    ajax: {
      url: $teacher.data('url'),
      dataType: 'json',
      quietMillis: 500,
      data (term, page) {
        return {
          q: term,
          page_limit: 10
        };
      },
      results (data) {
        console.log(data);
        return {
          results: data.map((item) => {
            return { id: item.id, name: item.name };#results结果集
          })
        };
      }
    },
    ### 默认显示option项设置
    initSelection (element, callback) {
      let data = [];
      let ids = $(element).val();
      $.ajax({
          url:$teacher.data('init-url'),
          dataType: "json",
          type: "GET",
          quietMillis: 0,
      }).done(function(itemVal) {
        data = itemVal;
        callback(data);
      });
      callback(data);
    },
    ### 选择结果项设置
    formatSelection (item) {
      return item.name;
    },
    ### 查询结果项设置
    formatResult (item) {
      return item.name;
    },
    ### 查询无结果项设置
    formatNoMatches: function() {
      return Translator.trans('未搜索到用户');
    },
    formatSearching: function() {
      return Translator.trans('site.searching_hint');
    },
    multiple: true,
    maximumSelectionSize: 20,
    maximumSelectionLength:20,
    placeholder: Translator.trans('请输入用户姓名或手机号'),
    width: 'off',
    createSearchChoice () {
      return null;
    }
  });

select2插件地址：Options | Select2 - The jQuery replacement for select boxes