问题描述
我发现了 Awesomplete JavaScript/jQuery 插件 here。它是一个组合框/下拉列表小部件，当用户在输入文本元素中键入字符时，它会显示一个无大小写匹配列表。提供的链接显示了小部件网页的部分，该部分显示了如何将多个条目输入到输入元素中，这正是我所需要的。本节中的现场演示显示该小部件可以正常工作。
不幸的是，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: </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,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 网页的顶部部分，然后单击“下载”按钮。
在我使用这个小部件的初始测试网页中，我在输入元素中使用了 class="awesomplete" 设置，如 Awesomplete 网页顶部附近建议的那样，它有效，但它只让我输入一个值.但是，我需要输入多个匹配项，但仅将 multiple 和 data-multiple 属性添加到 input 元素还不足以使其工作。然后我添加了创建 Awesomplete 对象的脚本，并将类从 input 元素中取出，但那时我开始出现上面显示的错误。 顺便说一句，在元素中设置类不起作用。
完成上述工作后，我想知道在脚本中创建 Awesomplete 对象时是否会使用 input 元素中的 Awesomplete 设置，或者我是否需要将 then 从 input 元素中取出，而是明确地将它们放入很棒的新电话。
谢谢
解决方法
将上述网页内容放入codepen.io时，发现使用codepen的设置js搜索工具可以找到javascript文件，但是使用css搜索工具却找不到对应的css文件。但是，使用 js 文件的 URL，我能够找到 css 文件。当这两个 URL 都添加到 codepen 时，我的测试版本就可以工作并且确实允许在 input 元素中选择多个选项。最后，能够将脚本和链接语句复制到我的测试网页的本地版本中，并且它也有效。请注意，脚本语句使用的是 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">
希望这也能帮助其他人。