Как обновить список HTML данными JQuery / AJAX JSON

Question

У меня есть список из ~ 25 элементов (и, возможно, еще больше) и поле ввода текста, в котором пользователь может ввести ключевое слово, в котором список должен обновляться, чтобы отражать только элементы, которые соответствуют этому ключевому слову.

Я бы хотел использовать вызов AJAX для PHP-файла, который соответственно возвращает результаты в стиле JSON.

Будучи новичком в этой области, просмотрев множество примеров, я как-то застрялмежду вызовом AJAX и обновлением списка ...

HTML:

<div id="div_geg">
  <input type="text" name="q2" id="query2" />  
  <ul name="ul_geg" id="ul_geg">
    <li>item 1</li>
    <li>item 2</li>
    ....
   </ul>
 </div>

JS:

// update the list
function updateGEGsList(updated_gegs) 
{
  // clear the existing list
  $('#ul_geg li').remove();

  $.each(updated_gegs, function(index,gegName) {
    $('#ul_geg .list').append("li id='" + gegID + "' style='padding-left: 10px;'><a href='#!' style='color: #3c72d2'>" + gegName + "</a></li>")
  });   
}

Вызов AJAX:

// get data
$("#query2").keyup(
    function() 
    {
        $.ajax({
            type: 'POST',
            url: 'etc/php/autocomplete_mea.php',
            data: 'term=' + $("#query2").val(),
            dataType: "json",
            success: function(response) {
                updateGEGsList(data);

            }       
        })
    }
)

В принципе вызываемый файл PHP отправляет правильные результаты обратно.Попробовал это.

Моя первая проблема, что вызов не работает должным образом.Я получаю «Uncaught ReferenceError: данные не определены» при вводе в поле ввода.

Во-вторых, для обновления списка AJAX-возвращение представляет собой массив {ID, NAME}, и яЯ не уверен, как это можно реализовать.

[{"id":"11","value":"Aichi Biodiversity Targets"},
{"id":"8","value":"Aichi Biodiversity Targets"},
{"id":"19","value":"Joint Convention on the Safety of Spent Fuel Management and on the Safety of Radioactive Waste Management"}]

Большое спасибо за любые подсказки!

Answer 1

В вашем обратном вызове ajax вы получаете переменную response, но вы передаете data в функцию обновления, которая не определена.Измените это на:

success: function(response) {
    updateGEGsList(response);
} 

Обновление с массивом объектов типа

{
   id: '',
   value: ''
}

Используйте цикл for, чтобы выполнить итерацию ответа (массива) и построить новый список элементов:

function updateGEGsList(updated_gegs) 
{
  var items = [];
  for (var i in updated_gegs) {
      var item = updated_gegs[i]; 
      items.push('<li id="' + item.id + '">' + item.value + '</li>');
  }
  $('#ul_geg').html(items.join(''));     
}