用 PHP 数组填充 JQuery 自动完成
Posted
技术标签:
【中文标题】用 PHP 数组填充 JQuery 自动完成【英文标题】：Filling JQuery autocomplete with PHP array 【发布时间】：2015-12-13 20:55:12 【问题描述】：我是 javascript 和 JQuery 的相对菜鸟，但我已经在网上搜索了几个小时以找到这个问题的答案。我正在尝试使用我在 php 中创建的数组填充 JQuery 自动完成函数。这是数组的一个sn-p：
<?php
$arr = array(
"Abaddon" => "/BlinkDaggerSounds/abad_blink_01.mp3",
"Alchemist" => "/BlinkDaggerSounds/alch_blink_01.mp3",
"Anti Mage" => "/BlinkDaggerSounds/anti_blink_01.mp3",
"Ancient Apparition" => "/BlinkDaggerSounds/appa_blink_01.mp3",
"Axe" => "/BlinkDaggerSounds/axe_blink_01.mp3",
);
?>
这是我要运行的脚本：
<script>
$(function()
var availableTags = <?php echo json_encode($arr); ?>
$( "#auto" ).autocomplete(
source: availableTags;
);
);
</script>
这是表格：
<form method="post" action="BlinkDaggerQuiz.php" class="answer_box">
<p>Which hero is it? <input type="text" id="auto" name="guess" /></p>
</form>
还有我的头标签：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="BlinkDaggerQuiz.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
我不知道我错过了什么；自动完成选项不会显示在文本框中。我也尝试用implode() 替换json_encode()，但得到相同的非结果。
【问题讨论】：
var availableTags 的实际（渲染）页面源是什么样的？该变量是否设置正确？
【参考方案1】：
我相信您当前的代码应该返回一些语法错误。按 F12 找出答案。
您似乎正在尝试使用 jQuery UI 中的 Autocomplete 小部件。普通的旧 jQuery 中没有内置自动完成功能，因此您还必须包含 jQuery UI。
这部分是JavaScript：
$( "#auto" ).autocomplete(
source: availableTags;
);
);
这意味着availableTags 也需要是一个 JavaScript 数组。 JavaScript 数组最简单的语法是var myArray = ['a', 'b', 'c'];。
您需要将 PHP 数组输出到 JavaScript 数组中，这可以通过 implode 函数完成。如果给定一个数组，implode 函数将连接该数组中的所有值。在您的情况下，您希望数组的 keys 位于数组中，而不是 values。因此，您可以使用array_keys 函数来检索给定数组中的所有键。你最终会得到：
var availableTags = [<?php echo '"' . implode ('","', array_keys ($arr)) . '"'; ?>];
当您的页面加载时，您应该以正确的 JavaScript 数组结束：
var availableTags = ["Abaddon","Alchemist", "Anti Mage", "Ancient Apparition", "Axe"];
据我所知，没有名称中带有双引号的 Dota 英雄，因此使用双引号作为字符串应该没问题..
【讨论】：
非常感谢！我不知道我需要添加单独的 jquery-ui 文件。效果很好，谢谢！【参考方案2】：确保与下文件链接
<!-- html -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
自动完成功能适用于像
这样的数组var availableTags = ["Abaddon","Alchemist", "Anti Mage", "Ancient Apparition", "Axe"];
所以您需要根据需要更改外观..
<?php
$new_arr = array();
$arr = array(
"Abaddon" => "/BlinkDaggerSounds/abad_blink_01.mp3",
"Alchemist" => "/BlinkDaggerSounds/alch_blink_01.mp3",
"Anti Mage" => "/BlinkDaggerSounds/anti_blink_01.mp3",
"Ancient Apparition" => "/BlinkDaggerSounds/appa_blink_01.mp3",
"Axe" => "/BlinkDaggerSounds/axe_blink_01.mp3",
);
foreach ($arr as $key => $value)
$new_arr[] = $key;// or $value
?>
<script>
$(function()
var availableTags = <?php echo json_encode($new_arr); ?>
$("#auto").autocomplete(
// source: availableTags; // autocomplete source is not include ";" (semicolon)
source: availableTags //correct
);
);
</script>
【讨论】：
以上是关于用 PHP 数组填充 JQuery 自动完成的主要内容，如果未能解决你的问题，请参考以下文章
停止 jQuery 自动完成以过滤/搜索结果并填充整个源数组数据
Javascript/PHP/Jquery - 自动填充和数据加密
怎样用jquery实现新闻无闪动刷新，用js中工具箱2到3个控件，搜索文本框自动文本框自动填充完成