我有一个正常运行的 JQuery 自动完成脚本，该脚本调用查询数据库的 PHP 脚本，循环访问结果，将它们插入数组中，然后此函数回显该数组json_encoded并且自动完成效果很好：
示例 A：
$(function() {
var availableTags = <?php echo json_encode($names); ?>;
$( "#Person" ).autocomplete({
dataType: "json",
source: availableTags
});
});
但是，使用此方法，$names中的所有名称在页面源代码中都可见。我有另一个利用 ajax 的功能自动完成脚本：
示例 B：
$("#Person").keyup(function(){
$.ajax({
type: "POST",
url: "PHPscript",
data:'keyword='+$(this).val(),
success: function(data){
$("#Person-suggestion-box").show();
$("#Person-suggestion-box").html(data);
}
});
});
然而，不同之处在于，我必须手动设置人员建议框的样式，并手动编码许多在功能上捆绑到简单的 JQuery 自动完成中的复杂性。有没有办法将示例 A 与示例 B 的功能结合使用（以便我拥有 JQuery 自动完成附带的简单 CSS 和功能，但具有示例 B 结果的隐私（在源代码中不可见）？任何帮助，不胜感激。
如何将
$names回显到div 元素中，将该div 中的所有内容复制到 javascript 变量中，然后从 DOM（和源代码）中删除div 及其所有名称，
.PHP：
<div class="names"><?php echo json_encode($names) ?></div>
.JS：
// copy names from the div
var availableTags = $('div.names').html();
// remove div
$('div.names').remove();
// add content to autocomplete
$("#Person").autocomplete({
dataType: "json",
source: availableTags
});
编辑：
div 在开始时需要为空。只有在页面加载完成后，才使用 ajax 调用（类似于示例 B 中的调用）获取名称，然后将它们添加到 <div class="names"></div> ，
$('div.names').html(data);
之后按照第一个建议继续，
// copy names from the div
var availableTags = $('div.names').html();
// remove div
$('div.names').remove();
// add content to autocomplete
$("#Person").autocomplete({
dataType: "json",
source: availableTags
});