JQuery Autocomplete und AJAX Kombination

Question

Ich versuche, Auto-Vervollständigung auf einem Textfeld in PHP zu implementieren. Die Daten aus der automatischen Vervollständigung werden mithilfe eines GET-Ajax-Aufrufs abgerufen (der eine bestimmte API aufruft und die json-Ausgabe zurückgibt). Der Code für meine Ajax war wie folgt:

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

Dieser Code wurde funktionierend finden, und die Ausgabe in der Konsole korrekt angezeigt. Als nächstes habe ich versucht, als „Quelle“ zu meinen autcomplete Aufruf dieser Ajax-Aufruf Hinzufügen wie folgt:

Hier

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

hielt der Code aus irgendwelchen Gründen zu arbeiten, und alle console.log Befehle, die ich Ausgabe der Ergebnisse aufgehört hatte.

Eine andere Methode, die ich als Antwort auf eine ähnliche Frage gefunden wurde, den folgenden Code zu implementieren:

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

Das war ein bisschen besser als die automatische Vervollständigung in der Tat Ergebnisse darauf hindeutet, wurde, aber es war widersprüchlich, wie es manchmal 1 ausgegeben Ergebnis statt 2 (mein Ajax-Aufruf gibt IMMER 2 Ergebnisse zurück, und ich habe mit console.log sichergestellt, dass dies immer der Fall ist), und manchmal waren die Vorschläge der automatischen Vervollständigung diejenigen des vorherigen AJAX-Aufrufs und nicht der aktuellen (wieder , Konsole zeigte neue Ergebnisse, aber Autocomplete schlug vor.

Wenn Sie cou Ich würde auf die Fehler in diesen beiden Methoden hinweisen, es wäre großartig. Danke !!

Answer 1

Code sieht gut aus. Bitte erwähnen Sie das JSON-Ausgabeformat.