Используя чистый Javascript, моя цель — воссоздать функцию jQuery .autocomplete() для отображения списка предложений по мере того, как пользователь вводит данные в строку поиска.
Я написал код, который прослушивает события keyup/change/paste/input для элемента ввода, т.е. панели поиска. По мере ввода пользователем я хочу использовать запрос XMLHttpRequest GET (или POST), который до сих пор будет доставлять пользовательский ввод (и информацию о контексте поиска - не имеет значения) функции просмотра, которая, в свою очередь, будет фильтровать модель для объектов содержащий пользовательский ввод, и вернуть эти объекты в списке JSONResponse в XMLHttpRequest, чтобы я мог отображать предложения на веб-странице.
Я пытался использовать запросы GET и POST, но данные, которые я хотел отправить в функцию просмотра с помощью XMLHttpRequest.send(data), казалось, никогда не доставлялись в функцию просмотра, что мешало моему прогрессу. Во всех попытках печать request.POST (или request.GET) давала пустой QueryDict: ‹QueryDict: {}›
Ниже приведены некоторые фрагменты кода:
\\ The below JS code is run on once the page is ready, i.e fully loaded
addListenerMulti(query, "propertychange change click keyup input paste", function () {
// check if value has changed...
if (query.value != oldVal) {
oldVal = query.value;
var context_object = JSON.stringify({
"query_so_far": encodeURI(query.value),
"search_context": encodeURI(document.getElementById("filter").value)
});
try {
var xhr = new XMLHttpRequest();
xhr.open("GET", 'url-for-view-function');
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.response);
} else if (xhr.status === 500) {
console.log(xhr.response);
}
}
xhr.send(context_object);
} catch (e) {
console.log(e);
}
}
})
Что я делаю неправильно и как я могу это исправить? Спасибо.