Question

我想制作一个带有自动建议下拉列表的电子邮件输入框。我从github＆amp;中下载了Select2插件。按照插件指令安装了.js和.css文件。

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

Answer 1

与任何其他jquery插件一样，select2插件也将其功能添加到jquery对象。因此，您使用$()获取DOM元素的引用，然后在其上调用select2()，它将简单的dorpdown元素转换为自动完成下拉列表，如：

<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>

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

<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或要选择的名称等，那么您可以更改数组的文本字段。

如何使用select2 jQuery插件进行tokenizer？

1 个答案: