js下拉框组件select2使用总结

Select2.js 是一个基于 jQuery 的 选择框 控件，它允许开发者创建更加美观、易用的下拉选择框。

特性：支持搜索功能、支持分组显示、支持动态数据加载、支持多选操作、支持自定义样式

简单使用

<script src="../plugins/jquery/jquery-1.12.4.min.js"></script>
<script src="../plugins/select2/js/select2.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="../plugins/select2/css/select2.min.css" />
<style>
  select {
    width: 400px;
  }
</style>

<fieldset>
  <legend>简单使用</legend>
  <select id="select" name="fruit">
    <option value="">---</option>
    <option value="apple">苹果-apple</option>
    <option value="orange">橙子-orange</option>
    <option value="banana">香蕉-banana</option>
    <option value="carrot">红薯-carrot</option>
    <option value="lettuce">生菜-lettuce</option>
    <option value="tomato">西红柿-tomato</option>
  </select>

  <select id="select-mul" name="fruit[]" multiple>
    <option value="">---</option>
    <optgroup label="水果">
      <option value="apple">苹果-apple</option>
      <option value="orange">橙子-orange</option>
      <option value="banana">香蕉-banana</option>
    </optgroup>
    <optgroup label="蔬菜">
      <option value="carrot">红薯-carrot</option>
      <option value="lettuce">生菜-lettuce</option>
      <option value="tomato">西红柿-tomato</option>
    </optgroup>
  </select>

  <br />
  <button onclick="cancelSelect()">cancel</button>
  <button onclick="enableSelect()">enable</button>
  <button onclick="disableSelect()">disable</button>
  <button onclick="openSelect()">open</button>
  <button onclick="closeSelect()">close</button>
  <button onclick="checkSelect()">check is inited</button>
  <button onclick="destorySelect()">destory</button>
  <button onclick="addOption()">add option</button>
  <button onclick="getData()">get data</button>

  <script>
    function formatOption(state) {
      return $("<a> " + state.text + "</a>");
    }

    $("#select").select2({
      placeholder: "Select an option",
      theme: "classic",
      closeOnSelect: true, //选中后是否关闭下拉框
      selectOnClose: true, //下拉框关闭时是否自动选择高亮的选项
      templateResult: formatOption, //用于选项复杂模板渲染
    });
    $("#select-mul").select2({
      maximumSelectionLength: 2, //限制最多选几项
      allowClear: true, //允许清除选择
      language: "zh_CN",
    });

    function cancelSelect() {
      $("#select").val(null).trigger("change");
    }

    function enableSelect() {
      $("#select").prop("disabled", false);
    }

    function disableSelect() {
      $("#select").prop("disabled", true);
    }

    function addOption() {
      $("#select").append(new Option("梨子 - pear", "pear", false, false)).trigger("change");
    }

    function getData() {
      console.log($("#select").select2("data"));
    }

    function openSelect() {
      $("#select").select2("open");
    }

    function closeSelect() {
      $("#select").select2("close");
    }

    function checkSelect() {
      console.log($("#select").hasClass("select2-hidden-accessible"));
    }

    function destorySelect() {
      $("#select").select2("destroy");
    }

    // 绑定事件
    $("#select").on("select2:select", function (e) {
      console.log("select event");
    });

    // 解绑事件
    $("#select").off("select2:select");
  </script>
</fieldset>

     

动态创建

<fieldset>
  <legend>动态创建</legend>
  <select id="select-dynamic"></select>
  <select id="select-mul-dynamic" multiple></select>
  <script>
    $("#select-dynamic").select2({ tags: true });
    $("#select-mul-dynamic").select2({ tags: true, tokenSeparators: [",", " "] });
  </script>
</fieldset>

 

其它数据源

<fieldset>
  <legend>数据源</legend>
  <select id="select-data"></select>
  <select id="select-data-group"></select>
  <select id="select-ajax"></select>
  <script>
    const data = [
      {
        id: 1,
        text: "Option 1",
      },
      {
        id: 2,
        text: "Option 2",
        selected: true,
      },
      {
        id: 3,
        text: "Option 3",
        disabled: true,
      },
    ];
    const data_group = [
      {
        text: "Group 1",
        children: [
          {
            id: 1,
            text: "Option 1.1",
          },
          {
            id: 2,
            text: "Option 1.2",
          },
        ],
      },
      {
        text: "Group 2",
        children: [
          {
            id: 3,
            text: "Option 2.1",
          },
          {
            id: 4,
            text: "Option 2.2",
          },
        ],
      },
    ];
    $("#select-data").select2({ data: data });
    $("#select-data-group").select2({ data: data_group });

    //检索远端数据
    $("#select-ajax").select2({
      ajax: {
        delay: 1000, //等待用户输入，延迟发送请求
        url: "http://localhost:3000/php-demos/test.php",
        dataType: "json",
        data: function (params) {
          console.log(params);
          return {
            kw: params.term,
            page: params.page || 1,
          };
        },
        processResults: function (data, params) {
          console.log(data, params);
          params.page = params.page || 1;

          return {
            results: data.results,
            pagination: {
              more: params.page * 20 < data.total_count,
            },
          };
        },
        cache: true,
      },
      placeholder: "Search ...",
      maximumInputLength: 20, //允许的最大输入长度
      minimumInputLength: 2, //开始搜索最小输入长度
    });
  </script>
</fieldset>

 后端test.php

查看代码

 <?php

try {
    $dsn = "mysql:host=127.0.0.1;port=3306;dbname=test;charset=utf8";
    $user = "root";
    $password = "";
    #持久连接
    $pdo = new PDO($dsn, $user, $password, [PDO::ATTR_PERSISTENT => true]);
    #设置获取值的方式
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
    #设置报错模式，默认报错模式为silent模式：不会主动报错，还有警告模式：错误发生后通过php标准报告错误，异常模式：错误发生后抛出异常
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (Exception $error) {
    die('connect error');
}

$kw = $_GET['kw'];
$p = isset($_GET['page']) ? intval($_GET['page']) : 1;
$page_size = 20;
$start = ($p - 1) * $page_size;

$sql = "SELECT count(id) as total_count from tb_chinese_poems where title like ? ";
$stmt = $pdo->prepare($sql);
$stmt->execute(["%{$kw}%"]);
$data = [];
$row = $stmt->fetch();
$total_count = $row['total_count'];

$sql = "SELECT id, title from tb_chinese_poems where title like ? limit {$start},{$page_size} ";
$stmt = $pdo->prepare($sql);
$stmt->execute(["%{$kw}%"]);
$data = [];
while ($row = $stmt->fetch()) {
    $data[] = ['text' => $row['title'], 'id' => $row['id']];
}
echo json_encode(['results' => $data, 'total_count' => $total_count]);
exit;

ajax返回数据格式：

全唐诗测试

查看代码

 <?php
try {
  $dsn = "mysql:host=127.0.0.1;port=3306;dbname=test;charset=utf8";
  $user = "root";
  $password = "";
  $pdo = new PDO($dsn, $user, $password, [PDO::ATTR_PERSISTENT => true]);
  $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (Exception $error) {
  die('connect error');
}

$sql = "select title,author,content from tb_chinese_poems";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$data = [];
while ($row = $stmt->fetch()) {
  $data[] = str_replace(["\n", "\r"], '', $row['title'] . ' - ' . $row['author'] . ' - ' . $row['content']);
}

?>
<script src="../plugins/jquery/jquery-1.12.4.min.js"></script>
<script src="../plugins/select2/js/select2.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="../plugins/select2/css/select2.min.css" />
<style>
  select {
    width: 400px;
  }
</style>
<select id="select" name="fruit">
  <option value="">---</option>
  <?php foreach ($data as $item) : ?>
    <option value="<?= $item ?>"><?= $item ?></option>
  <?php endforeach ?>
</select>
<script>
  $("#select").select2();
</script>

 

可能是数据过多的关系(14.5k)，点开组件时稍稍卡顿，检索结果也是秒出