如何使用select2 jQuery插件作为标记器？

Question

我想做一个带有自动建议下拉菜单的电子邮件输入框。我从github下载了Select2插件，并按照插件说明安装了.js和.css文件。

我不理解输入框的标记，以及输入框如何选择要显示为建议的数据。有谁能帮帮我吗？

Answer 1

就像任何其他jquery插件一样，select2插件也将其特性添加到jquery对象中。因此，您使用$()获取DOM元素的引用，然后对其调用select2()，它将简单的dorpdown元素转换为autocomplete dropdown，如下所示：

<html>
 <head>
  <script>
     $(document).ready(function() {
          $("#my-dropdown").select2();
     });
  </script>
</head>
<body>
 <select id="my-dropdown">
   <option id="1">Dogs</option>
   <option id="2">Cats</option>
   <option id="3">Wolves</option>
   <option id="4">Rhinos</option>
 </select>
</body>

因为你需要在电子邮件输入框中使用它。我想输入框是用来输入电子邮件ids的。因此，您可以做的是，将电子邮件in列表保存在一个对象数组中。并且在页面上有一个具有multiple属性的select元素。然后在页面加载时，只需使用select2插件将数组绑定到select，如下所示：

<html>
  <head>
     <script>
        var list = [{id: "abcd@gmail.com", text: "Foo Bar"}, 
                    {id: "jhon.doe@abcd.com", text: "John Doe"}, 
                    {}, ....];

        $(document).ready(function() {
                $("#email-input-box").select2({data: list});
        });

      </script>
  </head>
  <body>
      <select id="email-input-box" multiple="multiple"></select>
  </body>
</html>   

一旦确定了要向用户显示的内容、用户可以键入的内容(如电子邮件id或要选择的名称等)，就可以对数组的文本字段进行更改。