使用 select2 引导模式

介绍

Select2 是一款基于 jQuery 的选择框插件，它能够将普通的 <select> 元素转换成搜索框和可多选的选择框。

引导模式是 Select2 的一种模式，它可以在用户输入时根据用户输入的内容展示匹配项，提高用户的选择效率，同时保留了选择框的优势。

如何使用

1. 引入必要的文件：

   <link rel="stylesheet" href="select2.min.css">
   <script src="jquery.min.js"></script>
   <script src="select2.min.js"></script>
   

2. 编写 HTML 代码：

   <select id="mySelect" multiple="multiple" style="width: 300px;">
       <option value="1">Apple</option>
       <option value="2">Banana</option>
       <option value="3">Cherry</option>
       <option value="4">Grape</option>
       <option value="5">Orange</option>
   </select>
   

3. 调用 Select2：

   $(document).ready(function () {
       $('#mySelect').select2({
           placeholder: 'Choose your fruit',
           allowClear: true,
           tags: true,
           minimumInputLength: 1,
           ajax: {
               url: 'http://localhost/myFruits',
               dataType: 'json',
               delay: 250,
               data: function (params) {
                   return {
                       q: params.term
                   };
               },
               processResults: function (data) {
                   return {
                       results: data
                   };
               },
               cache: true
           }
       });
   });
   

   解释：

   • placeholder：选择框的提示信息。
   • allowClear：是否允许清除已选中的选项。
   • tags：允许用户输入自定义的选项。
   • minimumInputLength：输入框至少输入的字符数才会触发搜索。
   • ajax：使用 Ajax 技术进行异步搜索，其中的参数可以根据实际情况进行修改。

效果演示

选择框初始状态：

用户输入关键字“an”：

用户输入关键字“grape”：

选择一个已有的选项：

总结

通过 Select2 的引导模式，可以提高用户的选择效率，同时保留了选择框的优势。因此，在需要进行大量选择操作的地方，可以使用 Select2 来优化交互体验。