Autocomplete in a modal is not listed/populated

Question

I am creating an 'assign button' which calls a modal. In this modal will search a username queried from a database table. This autocomplete should be listed in the modal box, in fact it is not. I am using Jquery UI for this.

The "No search result" text is behind the modal, as well the assignee is listed behind the modal.

I am detailing my code in this jsfiddle

This is my original code:

 $("#user_name").autocomplete({ source: function(request, response) { $.ajax({ url: "https://dummyjson.com/products", // url: "<?= site_url('Inventory/readuser'); ?>", method: "get", dataType: "json", data: { term: request.term }, success: function(data) { console.log("response --> ", data); response(data); //callback fn } }) //ajax console.log("ok"); }, //source select: function(event, ui) { $('[name="username"]').val(ui.item.username); $('[name="role"]').val(ui.item.role); $('[name="location"]').val(ui.item.location); } }); //#user_name

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-3"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <a href="#updateUser" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm mb-3 small" data-bs-toggle="modal" data-bs-target="#updateUser"><i class="bx bxs-filter-alt text-white-50"></i>Assign</a> </div> <div class="modal fade" id="updateUser" tabindex="-1" aria-labelledby="updateUser" aria-hidden="true"> <div class="modal-dialog modal-dialog-sm modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Assign user...</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <fieldset class="border rounded-3 p-2"> <legend class="float-none w-auto px-2 small">type a user name</legend> <div class="frmSearch"> <input type="text" class="form-control form-control-sm" id="user_name" name="user_name" size="20" maxlength="3"> <div id="suggesstion-box"></div> </div> </fieldset> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-save-filter" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary btn-save-filter" data-bs-dismiss="modal">OK</button> </div> </div> </div> </div>

but in fiddle I am using dummy json from https://dummyjson.com/docs/products

Please advise how to put the listed value into the green box in the modal.

Answer 1

Please review the following:

https://jsfiddle.net/Twisty/orv2j67n/1/

JavaScript

$("#user_name").autocomplete({
  appendTo: "#suggestion-box",
  source: function(request, response) {
    $.ajax({
      url: "https://dummyjson.com/products",
      method: "get",
      dataType: "json",
      data: {
        term: request.term
      },
      success: function(data) {
        var results = $.map(data.products, function(v, i) {
          v = $.extend(v, {
            label: v.brand,
            value: v.brand
          });
          return v;
        });
        console.log(results);
        response(results);
      }
    });
    console.log("ok");
  },
  select: function(event, ui) {
    $('[name="label"]').val(ui.item.title);
  }
});

Two changes to be aware of:

appendTo: "#suggestion-box",

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 also added a $.map() in the Success. This ensure that the proper elements exist when passing the data back to response() .

var results = $.map(data.products, function(v, i) {
  v = $.extend(v, {
    label: v.brand,
    value: v.brand
  });
  return v;
});
console.log(results);
response(results);

This is discussed here: https://api.jqueryui.com/autocomplete/#option-source

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]