用PHP数组填充JQuery自动补全 - Filling JQuery autocomplete with PHP array

我是一个JavaScript和JQuery的新手，但是我已经在网上搜索了几个小时来找到这个问题的答案。我试图填充JQuery自动完成函数使用数组我已经在PHP。这是数组的一个片段:

<?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="answerswer_box">
    <p>Which hero is it?  <input type="text" id="auto" name="guess" /></p>
</form>

And my head tags:

<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()，但得到了相同的非结果。

我相信您当前的代码应该返回一些语法错误。按F12看看。

您似乎正在尝试使用jQuery UI中的自动完成小部件。没有自动补全功能内置到普通旧的jQuery，所以你将不得不包括jQuery UI以及。

这部分是JavaScript:

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

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

您需要将PHP数组输出到JavaScript数组中，这可以通过内爆函数完成。如果给定一个数组，implode函数将连接该数组中所有值。在您的例子中，您希望数组的键在数组中，而不是值。因此，可以使用array_keys函数检索给定数组中的所有键。你会看到:

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

当你的页面加载，你应该结束一个适当的JavaScript数组:

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

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

确保链接到文件下

<!-- 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>