input动态搜索下拉框

环境 : 后台页面用的是layui.js

要求 : input动态搜索下拉框

引用插件 : 

 <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

页面 input 的代码 :

<div class="layui-form-item">

          <label class="layui-form-label">选择代理商</label>

          <div class="layui-input-block">

            <select lay-ignore class="proxys" name="proxy_id" style="width: 100%;height: 36px;">

            </select>

          </div>

</div>

渲染数据代码 :

  $('.proxys').select2({

          ajax: {

            url: '{:url("/index/task_proxy/data")}',

            type: 'POST',

            dataType: 'json',

            placeholder: '直接选择或搜索选择',

            data: function (val) {

              return {

                listtype: 3,

                search_all_url: val.term

              };

            },

            processResults: function (data) {

              var options = new Array();

              $(data.data).each(function (i, v) {

                options.push({

                  id: v.id,

                  text: v.name

                });

              });

              return {

                results: options

              };

            }

          }

        });

页面效果 :