Question

我正在使用jquery-ui库将自动填充库添加到我的项目中。

我创建了PHP脚本，我需要从中获取数据：

<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
require_once('connection.php');
$cid = $_SESSION['clinic_id'];
$searchTxt = '%'.$_POST['searchTxt'].'%';
$res = array();
$getPatients = "SELECT * FROM patient WHERE clinic_id = :cid and patient_name_en LIKE :searchTxt ORDER BY patient_id DESC";
$execGetPatients = $conn->prepare($getPatients);
$execGetPatients->bindValue(':cid', $cid);
$execGetPatients->bindValue(':searchTxt', $searchTxt);
$execGetPatients->execute();
$getPatientsResult = $execGetPatients->fetchAll();

$i = 0;
foreach($getPatientsResult as $result)
{
    $res[$i] = $result;
    $i++;
}

echo json_encode($res);
?>

JavaScript部分在这里：

<script>
$( function() {
  $("#searchTxt").on('keyup', function(){


    searchTxt = $("#searchTxt").val();
    $.ajax({
      url: '../php/autoComplete.php',
      data: {searchTxt: searchTxt},
      type: 'POST',
      dataType: 'JSON',
      success:function(resp)
      {
        $.each( resp, function(key, result)
        {
          var availableTags = result['patient_name_en'];
        });
      },
      error:function(resp)
      {
        console.log(resp)
      }
    })

  } );
$( "#searchTxt" ).autocomplete({
      source: availableTags
    });
});
</script>

我在控制台中有关于jQuery的错误：

Maximum call stack size exceeded.

但现在它以某种方式消失了，我不知道为什么。

现在在搜索文本框中输入后，我在开发人员工具的网络选项卡或数组中得到一个空数组但没有属性，并且在文本框附近没有显示任何自动完成：

修改

我将PHP中的一行更改为：

$searchTxt = '%'.$_POST['searchTxt'].'%';

现在没有php错误，但是JavaScript错误：

Uncaught ReferenceError: availableTags is not defined

Answer 1

$( "#searchTxt" ).autocomplete({
  source: availableTags
   });  


success:function(resp)
  {
    $.each( resp, function(key, result)
    {
      var availableTags = result['patient_name_en'];
    });
  },

您已在ajax调用的success方法中声明了availableTags，并且您正尝试在其范围之外访问它。

要么将availableTags作为全局变量，要么在顶部声明，以便您可以在两个位置访问它（在ajax成功后和自动完成方法中重新分配）。

Answer 2

 $( "#searchTxt" ).autocomplete({
      source: availableTags
    });
});

此代码在您的帖子获得成功之前执行，它是非阻塞的，因此您必须编写类似的内容。

$( function() {
  $("#searchTxt").on('keyup', function(){


    searchTxt = $("#searchTxt").val();
    $.ajax({
      url: '../php/autoComplete.php',
      data: {searchTxt: searchTxt},
      type: 'POST',
      dataType: 'JSON',
      success:function(resp)
      {
        $.each( resp, function(key, result)
        {
          var availableTags = result['patient_name_en'];
          $( "#searchTxt" ).autocomplete({
      source: availableTags
    });
});

        });
      },
      error:function(resp)
      {
        console.log(resp)
      }
    })

  } ); 
});

Jquery自动完成库返回数组，没有来自PHP脚本的属性

2 个答案: