Необходимо добавить поле поиска в раскрывающийся список в функции JS ⇐ Jquery

[Гость]

Привет, семейство Stack Overflow!
У меня есть функция JS ниже, в которой я создаю раскрывающийся список выбранных столбцов и извлекаю значения для этого столбца, хочу добавить поиск и выбрать в раскрывающемся списке у меня более 2 тысяч значений в одном столбце. Нужно добавить поле поиска в раскрывающийся список. раскрывающийся список находится в другой части функции успеха.

Код: Выделить всё

// Assuming columnData is declared globally or available in the calling scope
let columnData = {};

// Function to fetch distinct values for all columns
function fetchDistinctValues(tablename, columns) {
console.log('Starting fetchDistinctValues for table:', tablename, 'with columns:', columns);
$.ajax({
url: "{% url 'distinct-values' %}",
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
"tablename": tablename,
"columns": columns
}),
beforeSend: function (xhr) {
console.log('Setting CSRFToken before sending the AJAX request.');
xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
},
success: function (response) {
console.log('Distinct values fetched successfully:', response);
var columnData = {}; // Ensure this is defined if used outside this scope
columns.forEach(function (columnName) {
console.log('Processing column:', columnName);
column_name = columnName.replaceAll(" ", "_");

var lowerCaseColumnName = columnName.toLowerCase();
if (lowerCaseColumnName === 'start_datetime' || lowerCaseColumnName === 'end_datetime') {

var pickerId = 'id_' + column_name; // Assuming space to underscore conversion for IDs
console.log('Initializing date range picker for:', pickerId);
$('#' + pickerId).daterangepicker({
singleDatePicker: true,
timePicker: true,
locale: {
format: 'YYYY-MM-DD HH:mm:ss'
}
}).on('apply.daterangepicker', function (ev, picker) {
columnData[columnName] = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
console.log(`Updated ${columnName} in columnData:`, columnData[columnName]);
});
} else {
var dropdown = $(`#id_${column_name}`); // Assuming space to underscore conversion for IDs
console.log('Populating dropdown for:', columnName);
dropdown.empty();
dropdown.append('Select');
response[columnName].forEach(function (value) {
dropdown.append(`${value}`);
});
}
});
},
error: function (xhr, textStatus, errorThrown) {
console.error('Error fetching distinct values:', errorThrown);
console.log('Error details:', textStatus, xhr.responseText);
}
});
}

Thanks in Advance.


Источник: https://stackoverflow.com/questions/781 ... s-function