Блог

Функция addDataList() добавляет datalist к существующему элементу DOM (Ввод текста).

Пример: Добавьте некоторые значения:

 addDataList('my_input',[1,2,3,4,5]);
 

Если список данных уже существует, его параметры необходимо удалить и добавить новые параметры.

 addDataList('my_input',[6,7,8,9,10]);
 

При первом вызове функции addDataList() параметры добавляются, и ошибка не возникает.
Второй вызов приводит к ошибке:

Неперехваченная ошибка типа: datalist.appendChild не является функцией

Что я здесь делаю не так?

 function addDataList(i, a) {

    var id = i   "_datalist";
    var datalist = $('#'   id);
    if (datalist.length == 0) { // datalist does not exist
        var datalist = document.createElement('datalist');
        datalist.id =  id;
        document.body.appendChild(datalist);
    } else {
        datalist.html(''); // datalist exists, clear existing options
    }

    a.forEach(function (data) {
        var option = document.createElement('option');
        option.text =   data;
        datalist.appendChild(option);
    });
    
    $('#'   i).attr('list', datalist.id).attr('autocomplete', 'off');

}
 

Исправил это. datalist был объектом jQuery.

 function addDataList(i, a) {

    var id = i   "_datalist";

    var datalist = document.getElementById(id);
     
    if (!datalist) { // datalist does not exist
        var datalist = document.createElement('datalist');
        datalist.id =  id;
        document.body.appendChild(datalist);
    } else {
        datalist.innerHTML = '' // datalist exist, clear existing options
    }

    a.forEach(function (data) {
        var option = document.createElement('option');
        option.text =   data;
        datalist.appendChild(option);
    });
    
    $('#'   i).attr('list', datalist.id).attr('autocomplete', 'off');

}