JQuery автозаполнение и AJAX комбинация

Я пытаюсь реализовать автозаполнение на текстовом поле в php. Данные из автозаполнения извлекаются с помощью вызова GET ajax (который вызывает определенный api и возвращает выходные данные json).
Код для моего ajax был следующим:

<script type="text/javascript"> 
$(function() {
$( "#tags" ).keyup(function() {
  var query = document.getElementsByName('newartist')[0].value;
  $.ajax({
          type: "GET",
          url: "https://lab.anghami.com/rest/v1/SEARCHedge.php",
          data: "output=jsonhp&q=" + query,
          dataType: "html",
          success: function (data) {
              var obj = JSON.parse(data);
              console.log("1. " + obj[0]);
              console.log("2. " + obj[1]);
          }
        });
      });
    });
</script>

Этот код отлично работал find, а вывод был показан в консоли корректно. Затем я попытался добавить этот вызов ajax в качестве «источника» к моему полному вызову следующим образом:

<script type="text/javascript"> 
$(function() {
var query = document.getElementsByName('newartist')[0].value;
$( "#tags" ).autocomplete({
  source: function( request, response ) {
  $.ajax({
          type: "GET",
          url: "https://lab.anghami.com/rest/v1/SEARCHedge.php",
          data: "output=jsonhp&q=" + query,
          dataType: "html",
          success: function (data) {
              var obj = JSON.parse(data);
              var outp = [];
              outp.push(obj.sections[0].data[0].name);
              outp.push(obj.sections[0].data[1].name);
              console.log(obj.sections[0].data[0].name);
              console.log(obj.sections[0].data[1].name);
              response(outp);
          }
        });
      }
      });
    });
</script>

Здесь код перестал работать по каким-то причинам и любой консоли.команды log я перестал выводить результаты.

Другой метод, который я нашел в качестве ответа на аналогичный вопрос, состоял в реализации следующего кода:

<script type="text/javascript"> 
$(function() {
$( "#tags" ).keyup(function() {
  var query = document.getElementsByName('newartist')[0].value;
  $.ajax({
          type: "GET",
          url: "https://lab.anghami.com/rest/v1/SEARCHedge.php",
          data: "output=jsonhp&q=" + query,
          dataType: "html",
          success: function (data) {
              var obj = JSON.parse(data);
              var artists = [];
              artists.push(obj[0]);
              artists.push(obj[1]);
              test(obj);
          }
        });
      });
    });
   function test(data){ 
   console.log(data);
   $("#tags").autocomplete({
        source: data
    });
   }
</script>

Это было немного лучше, поскольку автозаполнение действительно предлагало результаты, но это было непоследовательно, так как иногда выводилось 1 результат вместо 2 (мой вызов ajax всегда возвращает 2 результата, и я убедился, что это всегда так с помощью консоли.log), и иногда предложения, предложенные автозаполнения были те из предыдущего вызова AJAX, а не текущего (опять же, консоль показала новые результаты, но автозаполнение предложил предыдущие.

Если бы вы могли указать на ошибки в обоих этих методах, это было бы здорово.
Спасибо!!

1 ответ