[Alexander Belov]

Делаю систему поиска на сайте на localhost.

Есть форма поиска input, к которой привязан datalist (var datalist).

При нажатии на кнопку (ok.addEventListener('click', function() {...код...})) в option этого datalist попадают слова из localStorage (var searchWords)

При клике на input-форму поиска не отображаются и не находятся поисковые слова (не показывает "подсказки" при вводе начальных букв), которые определяет функция посредством добавления их в качестве option в datalist.

Но во вкладке Elements инструмента разработчика Google видно, что эти options создаются динамически (по клику пользователя на кнопку) и их value - мои поисковые слова.

Подскажите, пожалуйста, как разобраться в ситуации. К сожалению, не получилось сделать код с динамическим добавлением в JS Bin или в JS Fiddle.

Поэтому выкладываю код сырым:

ok.addEventListener('click', function() {

                var events = JSON.parse(localStorage.getItem('events')) || [];

                for (var i=0; i < events.length; i++) {
                  
                var searchWords = JSON.stringify(events[i].Event);  

                var datalist = document.getElementById('eventDatalist');

                var option = datalist.appendChild(document.createElement("option"));

                option.value = searchWords;
  

               
                };
                
              }

 );