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

    }); 
});