Topic: Autocomplet is not working in Modal

Yutaka pro asked 2 years ago


Hi...

I'm trying to use an "input" with autocomplete function inside in a modal but it does not show the list of elements to autocompleted.The autocomplete function only works if it is out of the modal.

This is my HTML code...

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Modal</title>
</head>
<body>
    <div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
        </button>
        <!--Modal-->
        <div class="modal fade ui-front" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body ui-front">
                        <!--Autocomplete-->
                        <div id="basic" class="form-outline">
                            <input type="text" id="form1" class="form-control" />
                            <label class="form-label" for="form1">Example label</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Close
                        </button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>



    </div>
</body>
</html>


<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Content/MDB-UI-KIT-Pro-Essential-2.0.0/js/mdb.min.js"></script>

<script type="text/javascript">
    const basicAutocomplete = document.querySelector('#basic');
    const data = ['One', 'Two', 'Three', 'Four', 'Five'];
    const dataFilter = (value) => {
        return data.filter((item) => {
            return item.toLowerCase().startsWith(value.toLowerCase());
        });
    };

    new mdb.Autocomplete(basicAutocomplete, {
        filter: dataFilter
    });
</script>

This is a capture of my view...This is a capture of my view...


Andrew Ford priority answered 2 years ago


Your script tags should be right before the closing <body> tag, instead of after the closing <html> tag. And the autocomplete initialization should get wrapped in the shown.bs.modal event.

Working snippet - https://mdbootstrap.com/snippets/standard/andrew_ford/2693330#js-tab-view


Yutaka pro commented 2 years ago

Thank you, it works :)


joelgrondrup free commented 2 years ago

Was also looking for this problem to be solved. Would have been nice to notice in the docs.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No