我正在使用MDBootstrap Pro。
我已经使用mdbAutocomplete组件设置了搜索输入。每次用户“输入”某些东西时,我都会使用ajax来获取必须显示为“结果”的元素列表(我指的是自动完成的元素列表)。除了不删除旧的完成清单外,一切都进行良好;因此,我最终得到了X个自动完成列表的叠加(X是用户“输入”某些东西的时间)。
现象的图像:
HTML:
<div class="md-form">
<input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">
<button class="mdb-autocomplete-clear">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</button>
<label for="form-autocomplete" class="active">What is your favorite US state?</label>
</div>
JavaScript:
$(document).ready(function() {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
$.ajaxSetup({
// Function called befor sending ajax requests
beforeSend: function(xhr, settings) {
// Relative URL and POST type
if (!/^https?:.*/.test(settings.url) && settings.type == "POST") {
// CSRF Token in Header
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$('#form-autocomplete').on('input', function() {
$.ajax({
type : 'POST',
contentType: 'application/json',
url: 'ajax/asset-list',
data: {},
success: function (data) {
}
}).done(function(data) {
$('#form-autocomplete').mdbAutocomplete({
data: data['AssetList']
});
});
});
})
谢谢你!
var data = <your-ajax-here>
$('#form-autocomplete-2').mdbAutocomplete({
data: data
});
这样,您甚至不需要oninput
事件。
此外,如果要从服务器获取数据,则应使用GET
而不是POST
方法。