Mather Blog

Select 2

默认分类 0 评

select2 Select2

官方文档
Github

感谢两位作者 Kevin Brown & Igor Vaynberg

原生 <select> 标签没有 美化和 DOM 事件,没有模糊搜索,从后端获取数据时要自行插入选项,小码农真是伤不起。于是在 AdminLTE 中找到一款叫 Select2 的 jQuery 插件。它支持多语言、远端数据搜索、选项分页。这一切还基于简洁易懂的 jQuery。


快速使用

1.在 <head> 标签内加入 CDN 地址,当然别忘了这玩意需要 jQuery

<link href="https://cdn.staticfile.org/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/select2/4.0.3/js/select2.min.js"></script>

2.使用 <select> 标签来初始化该插件:

HTML

<select>
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

JavaScript

$(document).ready(function() {
    $('select').select2({
        placeholder:'Select a state',
    });
});

Result


往往在项目中会遇到更复杂的需求,比如通过搜索关键字提交到后端,获取返回的数据到本地渲染再进行选取。

通过搜索仓库内商品的货号或条形码甚至是品名,从后端获取一个 JSON 对象,交给 Select2 内置的函数渲染成下拉列表, 编写对应的选择事件,完成整个组件的交互。

约定

API 接口是前后端交换的一种方式,使用 JSON 数据格式,以多个或者单个对象形式返回对象数组。这些数据直接返回至 Ajax 。栗子:

return.json

{
  "119": {
    "id": "119",
    "name": "Apple",
    "price": "12"
  },
  "120": {
    "id": "120",
    "name": "banana",
    "price": "8"
  }
}

官方的栗子

先来看看官方是怎么运用 jQuery's AJAX 来获取并处理数据给 Select2

后面我们实现自己的案例时可以上面约定好的 return.json 数据格式暂时取代后端提供的 API 。

这里的代码引用了官方的栗子 http://select2.github.io/examples.html


$(".js-data-example-ajax").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    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;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

传入的参数

ajax

传入的 ajax 对象的某些属性与 jQuery's AJAX 非常相似:

url API 请求的地址

dataType 数据类型

delay 每次键入至请求时的延迟时间

data API 请求的地址时带上的参数

processResults API 返回数据的处理函数

cache 缓存?

escapeMarkup
minimumInputLength
templateResult
templateSelection

ThinkPHP 模板引擎 使用备忘

发表评论
撰写评论