I'm encountering an issue with a JavaScript function that dynamically filters options in a Datalist based on the input in an associated text field. The filtering works well in most cases, but there's a problem when a comma is present in the input followed by space (e.g., "CYTO, BMR"). The options are not displaying as expected after the comma. Here is my code in body.
<datalist id="stockList">
<option value="BMR">
<option value="CYTO">
<option value="ASXC">
<option value="BMRA">
</datalist>
<div class="input-group-append">
<span class="input-group-text" id="searchButton">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-up-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.854 10.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707z" />
</svg>
</span>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Add JavaScript to submit the form on SVG button click
document.getElementById('searchButton').addEventListener('click', function () {
document.getElementById('stockForm').submit();
});
// Add JavaScript to submit the form on Enter key press
document.getElementById('symbol').addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
document.getElementById('stockForm').submit();
}
});
The JavaScript function is intended to filter options in a Datalist based on user input in the associated text field. It works well in most scenarios, but when a comma is present in the input followed by a space (e.g., "CYTO, BMR"), the options are not displaying correctly after the comma. I've tried various approaches suggested online, but none seem to resolve the issue.