[英]Autocomplete in a modal is not listed/populated
我正在创建一个调用模态的“分配按钮”。 在此模式中,将搜索从数据库表中查询的用户名。 这个自动完成应该列在模态框中,事实上它不是。 我为此使用 Jquery UI。
“无搜索结果”文本在模态后面,受让人也在模态后面列出。
我在这个jsfiddle中详细说明了我的代码
这是我的原始代码:
$("#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>
但在小提琴中,我使用的是来自https://dummyjson.com/docs/products 的虚拟 json
请告知如何将列出的值放入模态中的绿色框中。
请查看以下内容:
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);
}
});
需要注意的两个变化:
appendTo: "#suggestion-box",
菜单应附加到哪个元素。 当值为
null
时,将检查输入字段的父级是否为ui-front
的 class。 如果找到带有ui-front
class 的元素,菜单将附加到该元素。 无论值如何,如果未找到元素,菜单将附加到正文。
我还在成功中添加了一个$.map()
。 这确保在将数据传回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);
这在这里讨论: https://api.jqueryui.com/autocomplete/#option-source
具有 label 和值属性的对象数组:
[ { label: "Choice1", value: "value1" }, ... ]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.