为什么 Awesomplete JavaScript 对象在新建时创建失败？

Question

我找到了 Awesomplete JavaScript/jQuery 插件 here。它是一个 combobox/drop-down 列表小部件，可在用户将字符键入输入文本元素时显示不区分大小写的匹配项列表。所提供的 link 显示了小部件网页的部分，该部分显示了如何将多个条目输入到输入元素中，这正是我所需要的。本节中的现场演示显示该小部件有效。

不幸的是，Awesomplete 网页上显示的示例没有提供如何正确使用小部件的完整示例，因此我拼凑了以下内容以便开始将其集成到我自己的网页中，但是当脚本尝试创建 Awesomplete 对象时，我的尝试出错，说：

awesomplete.html: 61 Uncaught ReferenceError: Awesomplete is not defined
at awesomplete.html: 61
(anonymous) @ awesomplete.html: 61

这是我的代码：

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>Awesomplete: Multiple values</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src="awesomplete.js" async></script>
    <link rel="stylesheet" href="awesomplete.css" />
    <style>
      .visually-hidden { display: none; }
    </style>
  </head>
  <body translate="no" >
    <h2>Awesomplete: Multiple values</h2>
    <label for="browserInput">browser List:&nbsp;</label>
    <input type="text" id="browserInput"
           style="width: 245px;"
           maxlength="100"
           autocomplete="off"
           autofocus
           required
           placeholder="Enter browser name(s)."
           title="Enter the name of one or more browsers
or press space to see all choices."
           multiple
           data-multiple
           data-list="#browsersList"
           data-minchars="1"
           data-maxitems="100"
           data-autofirst
           aria-expanded="false"
           aria-owns="awesomplete_list_2"
           role="combobox" />
    <ul id="browsersList" hidden>
      <li>Zebra</li>
      <li>Safari</li>
      <li>Opera</li>
      <li>Microsoft Internet Explorer</li>
      <li>Microsoft Edge</li>
      <li>Google Chrome</li>
      <li>Firefox</li>
    </ul>
    <ul id="awesomplete_list_2" hidden
        role="listbox"
        aria-label="Results List">
    </ul>
    <span class="visually-hidden"
          role="status"
          aria-live="assertive"
          aria-atomic="true">
      Type one or more characters for results.
    </span>
    <script>
      // Show label and insert label into the input:

      // ***** The error occurs when the next line executes ***** //

      new Awesomplete( 'input[data-multiple]',
                       {
                         filter:  function( text, input ) {
                                    return Awesomplete.FILTER_CONTAINS(
                                             text, input.match( /[^,]*$/ )[ 0 ] );
                                  },

                         item:    function( text, input ) {
                                    return Awesomplete.ITEM(
                                             text, input.match( /[^,]*$/ )[ 0 ] );
                                  },

                         replace: function( suggestion ) {
                                    var before = this.input.value
                                                 .match( /^.+,\s*|/ )[ 0 ];

                                    this.input.value = before + suggestion.label + ", ";
                                  }
                       } );
    </script>
  </body>
</html>

在尝试运行我的网页之前，我将 <script src="awesomplete.js" async></script> 和 <link rel="stylesheet" href="awesomplete.css" /> 行所需的文件下载到我的计算机上。您可以使用此 link 来显示 Awesomplete 网页的顶部，然后单击“下载”按钮来执行相同的操作。

在我使用此小部件的初始测试网页中，我按照 Awesomplete 网页顶部附近的建议在输入元素中使用了 class="awesomplete" 设置，它有效，但它只让我输入一个值。但是，我需要输入多个匹配项，但简单地将 multiple 和 data-multiple 属性添加到 input 元素还不足以使其正常工作。然后我添加了创建 Awesomplete 对象的脚本，并从输入元素中取出 class，但那是我开始收到上面显示的错误的时候。顺便说一下，元素中的 class 不起作用。

完成上述工作后，我想知道在脚本中创建 Awesomplete 对象时是否会使用 input 元素中的 Awesomplete 设置，或者我是否需要从 input 元素中取出然后显式放置他们在 Awesomplete 新电话中。

谢谢

Answer 1

将上述网页内容放入codepen.io时发现javascript文件可以使用codepen的setting js搜索工具找到，但是对应的css文件可以' 使用 css 搜索工具时。但是，对 js 文件使用 URL，我能够找到 css 文件。当这两个 URL 都添加到 codepen 时，我的测试版本有效并且确实允许在输入元素中选择多个选项。最后，能够将脚本和 link 语句复制到我的本地版本的测试网页中，并且它也有效。请注意，脚本语句使用 min.js 版本，而不是完整版本。我不知道这是否是一个因素，但对于我的生产站点，我还是想要 min.js 版本。

下面是使我在此处发布的代码起作用所需的两行：

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.css">

希望这对其他人也有帮助。

Answer 2

我在 GitHub 页面上阅读了有关它的信息，并成功地尝试在第 7 行删除异步。

为什么 Awesomplete JavaScript 对象在新建时创建失败？

Why does the Awesomplete JavaScript object fail to be created when new'ed?

html

javascript

object

jquery-plugins

new-operator