用PHP数组填充JQuery自动完成

Question

我是JavaScript和JQuery的相对noob,但我已经在网上搜索了几个小时来找到这个问题的答案.我正在尝试使用我在PHP中创建的数组填充JQuery自动完成函数.这是数组的片段:

<?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(),但得到了同样的无结果.

Answer 1

我相信您当前的代码应该返回一些语法错误。按 F12 即可找到答案。

您似乎正在尝试使用jQuery UI 中的自动完成小部件。普通的旧 jQuery 中没有内置自动完成功能，因此您还必须包含 jQuery UI。

这部分是JavaScript：

$( "#auto" ).autocomplete({
    source: availableTags;
    });
});

这意味着availableTags也需要是一个 JavaScript 数组。JavaScript 数组最简单的语法是var myArray = ['a', 'b', 'c'];。

您需要将 PHP 数组输出到 JavaScript 数组中，这可以使用implode函数来完成。如果给定一个数组，该implode函数将连接该数组中的所有值。在您的情况下，您希望数组的键位于数组中而不是值中。因此，您可以使用array_keys函数来检索给定数组中的所有键。你最终会得到：

var availableTags = [<?php echo '"' . implode ('","', array_keys ($arr)) . '"'; ?>];

当你的页面加载时，你应该得到一个正确的 JavaScript 数组：

var availableTags = ["Abaddon","Alchemist", "Anti Mage", "Ancient Apparition", "Axe"];

据我所知，没有 Dota 英雄的名字中带有双引号，所以使用双引号作为字符串应该没问题。