如何将简单的 JQuery 自动完成语法与对远程数据源(PHP 脚本)的 ajax 调用相结合
How to combine simple JQuery autocomplete syntax with ajax call to remote data source (PHP script)?
我有一个正常运行的 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
});
相关文章:
- 使用php或javascript从facebook相册URL中删除多余的部分
- 将PHP变量传递给jQuery时遇到问题
- 通过javascript重定向html传递php变量
- 将数组从PHP传递到Javascript
- 如何在php文件中获取$.post-ajax传递的值
- Javascript运行php文件,然后下载文件
- PHP中的setcookie仅适用于localhost
- 如何使用jquery处理php循环通过元素
- 通过Ajax将JavaScript函数传递给PHP文件
- 而循环只设置php中输入字段中的第一个值
- 我需要从php调用javascript或jquery
- 如何通过php页面将数据库值检索到jquery自动完成框中
- PHP AJAX图片上传示例不上传
- 通过php页面中的js强制下载txt
- 如何在PHP中使用$_POST获取Select元素值
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 如何在php变量中嵌入JQuery代码
- 在PHP中使用javascript更改页面标题'if'
- 如何将字符串值从php页面发送到java脚本页面
- 如何将简单的 JQuery 自动完成语法与对远程数据源(PHP 脚本)的 ajax 调用相结合