Question 201177 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQueryUI Autocomplete – cant select with mouse

Can’t get the jQueryUI autocomplete to work with the mouse (autocomplete input is in bootstrap modal form). Only works when selecting with the keyboard, while selecting with the mouse is completely ignored.

Here is sample code with this bug:

(Loaded CSS/JS libraries: bootstrap 5, jQuery, jQuery UI, FontAwesome)
Bootstrap modal form popup.

<div class="container py-3">
    <button type="button" data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-primary">Open modal</button>
</div>
<!-- Modal popup -->
<div class="modal" tabindex="-1" id="myModal">
    <div class="modal-dialog">
        <form action="post" action="#" id="acModalForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h1>Form</h1>
                    <hr>
                    <div class="form-floating">
                        <input type="text" class="form-control" id="acInput" placeholder="Sample autocomplete value" value="">
                        <label for="acInput">Sample autocomplete value</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </form>
    </div>
</div>

Autocomplete Javascript

$(function () {
    const sampleData = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

    $("#acInput").autocomplete({
        source: sampleData,
        appendTo: "#acModalForm"
    });
});

Codepen

Is there some fix to this "bug"?

Any help is appreciated

Tags:

2

Answers


  1. 0

    you can set wrong id to append data so autocomplete data mouse selection not working you can set model id to work.

    Change code

    appendTo: "#acModalForm"

    To

    appendTo: "#myModal"

    Login or Signup to reply.
  2. 0

    Per the Docs:

    Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

    I would suggest adding the ui-front class to your Modal:

    $(function() {
  const sampleData = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

  $("#acInput").autocomplete({
    source: sampleData
  });
});
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div class="container py-3">
  <button type="button" data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-primary">Open modal</button>
</div>
<!-- Modal popup -->
<div class="modal" tabindex="-1" id="myModal">
  <div class="modal-dialog">
    <form action="post" action="#" id="acModalForm">
      <div class="modal-content ui-front">
        <div class="modal-header">
          <h5 class="modal-title">Edit form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <h1>Form</h1>
          <hr>
          <div class="form-floating">
            <input type="text" class="form-control" id="acInput" placeholder="Sample autocomplete value" value="">
            <label for="acInput">Sample autocomplete value</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </form>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search