当用户在输入字段中输入查询时,我的项目需要自动建议。我尝试使用 materialize CSS、Ajax、Django、Jquery 实现如下:
HTML 页面:
<div class="row" id ="adddiv">
<div class="input-field col s3">
<input placeholder="Stock Item" type="text" name="StockItem-1" class="validate dropdown-trigger" data-target="dropdown1" id="stockitem">
<ul id="dropdown1" class="dropdown-content">
</ul>
</div>
JS 代码片段:
$(function(){
// $("#stockitem").change(function(){
$('.dropdown-trigger').keyup(function(){
$('.dropdown-content').html("")
var query = $('.dropdown-trigger').val();
var data = {'query':query}
var url = 'auto_suggest'
$.ajax({
type: "GET",
url: url,
dataType : 'json',
data: data,
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
success: function(data)
{
var results = data["resultlist"]
$.each(results, function(index,value){
$('.dropdown-content').append("<li>"+ value +"</li>");
});
}
});
});
});
- 我能够从后端获取数据,并且 li 元素会附加选定的 ul 元素,但它不会在前端显示为下拉列表。
- 请参阅具体化 CSS dropdown :
- 我怀疑CSS有问题,请点击这里
最佳答案
您不应该使用下拉菜单,您应该使用自动完成功能
https://materializecss.com/autocomplete.html
还记得调用初始化函数,因为这就是您当前缺少的功能。通过以下修改,它应该可以工作。但同样,您应该为此使用自动完成功能。
$(function(){
///////////////////////////////////////////////
// YOU HAVE TO INITIALIZE THE DROPDOWN
const dropDownEl = $('.dropdown-trigger')[0]
M.Dropdown.init(dropDownEl)
///////////////////////////////////////////////////
// $("#stockitem").change(function(){
$('.dropdown-trigger').keyup(function(){
$('.dropdown-content').html("")
var query = $('.dropdown-trigger').val();
var data = {'query':query}
var url = 'auto_suggest'
$.ajax({
type: "GET",
url: url,
dataType : 'json',
data: data,
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
success: function(data)
{
var results = data["resultlist"]
$.each(results, function(index,value){
$('.dropdown-content').append("<li>"+ value +"</li>");
});
///////////////////////////////////////////////
// YOU HAVE TO OPEN THE DROPDOWN
M.Dropdown.getInstance(dropDownEl).open();
///////////////////////////////////////////////////
}
});
});
});
关于javascript - 在输入字段问题中物化CSS下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56343508/