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

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调用的成功方法里面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) 
     } 
    }) 

    }); 
});