jQuery自动完成和AJAX组合

Question

I'm trying to implement auto-complete on a textbox in php. The data from autocomplete is retrieved using a GET ajax call (which calls a certain api and returns json output). The code for my ajax was as follows:

<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>

This code was working perfectly find, and the output was shown in the console correctly. Next I tried adding this ajax call as "source" to my autcomplete call as follows:

<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>

Here, the code stopped working for some reasons, and any console.log commands I had stopped outputting the results.

One other method I found as answer to a similar question was to implement the following code:

<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>

This was a bit better as autocomplete was indeed suggesting results, but it was inconsistent as it sometimes outputted 1 result instead of 2 (my ajax call ALWAYS returns 2 results, and I made sure that it's always the case by using console.log), and sometimes the suggestions proposed by autocomplete were those of the previous AJAX call and not the current one (again, console showed new results but autocomplete suggested previous ones.

If you could point to the errors in both of these methods, it would be great. Thanks!!

Answer 1

Code looking fine. Please mention the JSON output format.