JQuery自動完成和AJAX組合

我試圖在php中實現自動完成文本框。使用GET ajax調用（調用某個API並返回json輸出）來檢索自動完成的數據。我的AJAX代碼如下：JQuery自動完成和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>

此代碼是可以正常使用發現，並輸出在控制檯中正確顯示。接下來，我嘗試添加該Ajax調用爲「源」我autcomplete電話如下：

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

這裏，代碼停止某些原因工作，任何的console.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個結果，並且我確定它總是通過使用console.log），有時候自動完成提出的建議是以前的AJAX調用提出的建議，而不是當前的（再次，控制檯顯示新的結果，但自動完成提示以前的結果。

如果你ld指出了這兩種方法中的錯誤，那就太好了。謝謝！

來源

2016-05-23 user3027427

代碼看起來不錯。請提及JSON輸出格式。

來源

2016-05-23 12:27:27

JSON輸出是一個大小爲2的數組（例如：[「item1」，「item2」]）作爲字符串返回（自然，因爲它是JSON）。我正在使用JSON.parse解析這個字符串，如上面的代碼所示。 – user3027427

JQuery自動完成和AJAX組合

回答

相關問題