Options in Datalist not Displaying Correctly after Comma in Input Field

15 views Asked by At

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.

0

There are 0 answers