I found the Awesomplete JavaScript/jQuery plug-In here. It's a combobox/drop-down list widget that displays a list of case-less matches while the user types characters into a input text element. The provided link shows the section of the widget's web-page that shows how multiple entries can be entered into the input element, which is exactly what I need. A live-demo in this section shows that the widget works.
Unfortunately, the examples shown at the Awesomplete web-page don't provide a complete example of how to properly use the widget, so I cobbled the following together in order to begin integrating it into my own web-page, but my attempt gets an error when the script tries to create the Awesomplete object, saying:
awesomplete.html: 61 Uncaught ReferenceError: Awesomplete is not defined
at awesomplete.html: 61
(anonymous) @ awesomplete.html: 61
Here is my code:
<!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, input.match( /[^,]*$/ )[ 0 ] );
},
replace: function( suggestion ) {
var before = this.input.value
.match( /^.+,\s*|/ )[ 0 ];
this.input.value = before + suggestion.label + ", ";
}
} );
</script>
</body>
</html>
I downloaded the files needed for the <script src="awesomplete.js" async></script> and <link rel="stylesheet" href="awesomplete.css" /> lines to my computer before trying to run my web-page. You may do the same using this link to show the top section of the Awesomplete web-page and then clicking on the Download button.
In my initial test web-page using this widget, I used class="awesomplete" setting in the input element as suggested near the top of the Awesomplete web-page, and it worked, but it only let me enter one value. However, I need to enter multiple matches, but simply adding the multiple and data-multiple attributes to the input element isn't enough to make it work. I then added the script that crates the Awesomplete object and took the class out of the input element, but that's when I started getting the error I showed, above. Incidentally, having the class in the element didn't work.
After the above works, I'm wondering if the Awesomplete settings in the input element will be used when the Awesomplete object is created in the script or do I need to take then out of the input element and instead explicitly put them in the Awesomplete new call.
Thanks
While putting the above web-page content into codepen.io I found that the javascript file can be found using the codepen's setting js search tool, but the corresponding css file can't when using the css search tool. However, using the URL for the js file, I was able to find the css file. When both of these URLs are added to codepen, my test version worked and did allow multiple choices to be selected in the input element. Finally, was able to copy the script and link statements into my local version of the test web-page, and it also worked. Note, the script statement uses the min.js version, not the full version. I don't know if this is a factor, but for my production site, I want the min.js version anyway.
Here are to two lines needed to make the code I posted here work:
<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">
Hope this helps others, too.