Question

我正在尝试在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>

此代码工作正常，输出正确显示在控制台中。接下来，我尝试将此ajax调用作为“source”添加到我的自动完成调用中，如下所示：

<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调用ALWAYS返回2结果，我确保通过使用控制台始终如此。 log），有时自动完成提出的建议是以前的AJAX调用，而不是当前的调用（同样，控制台显示新的结果，但自动完成建议以前的。

如果您可以指出这两种方法中的错误，那就太棒了。谢谢！

Answer 1

代码看起来很好。请提及JSON输出格式。

JQuery自动完成和AJAX组合

1 个答案: