Jquery自动完成多个PHP数组作为不同的类别

Question

我可以成功地使用 php 数组作为自动完成的结果，并且能够单独单击它们。但是，我现在还想使用第二个 PHP 数组并将其作为单独的类别。第一类将是用户名和第二个团队。以下是我的代码：

// query to find usernames for the search bar
  $userSearch = $pdo->prepare("SELECT username FROM members");


  $userSearch->execute([]);

    ($userSearchResult = $userSearch->fetchAll(PDO::FETCH_COLUMN));

// query to find teams for the search bar
  $teamSearch = $pdo->prepare("SELECT teamName FROM teams");


  $teamSearch->execute([]);

    ($teamSearchResult = $teamSearch->fetchAll(PDO::FETCH_COLUMN));

?>

<script type="text/javascript">
    //Assign php generated json to JavaScript variable
   var userSearch = <?php echo json_encode($userSearchResult); ?>;
   var teamSearch = <?php echo json_encode($teamSearchResult); ?>;

    $.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    }
});

$(function() {
    $("#searchBox").catcomplete({
        source: [{"label":userSearch, "category":"username"}, {"label":teamSearch, "category":"teams"}]
    });
});
</script> 

这与我已经完成的工作一样接近。问题是类别显示正确，但结果被列为一个带逗号的长数组。所以而不是：

usernames
   username 1
   username 2
   username 3
teams
   team 1
   team 2
   team 3

我明白了：

usernames 
   username 1,username 2,username 3
teams 
   team 1,team 2,team 3

我希望我在变量中使用 implode 可以对此进行排序，但它从来没有这样做过。

如果我只使用一个变量作为我的源而不使用这样的类别：

source: userSearch

我确实成功获得了用户名列表，这表明：

username 1
username 2
username 3

但这不包含类别或所需的第二个数组。

任何帮助将不胜感激。谢谢。

Answer 1

万一

<?php echo  implode('","',$userSearchResult); ?> 

您的数组将只有一个元素。

您需要使用json_encode 对数组进行编码：

var userSearch = <?php echo json_encode($userSearchResult); ?>;
var teamSearch = <?php echo json_encode($teamSearchResult); ?>;

根据手册 - 您应该将数据设置为：

var data = [
  { label: "anders", category: "" },
  { label: "andreas", category: "" },
  { label: "antal", category: "" },
  { label: "annhhx10", category: "Products" },
  { label: "annk K12", category: "Products" },
  { label: "annttop C13", category: "Products" },
  { label: "anders andersson", category: "People" },
  { label: "andreas andersson", category: "People" },
  { label: "andreas johnson", category: "People" }
];

所以在你的情况下你需要修改你的 php 数组：

$userSearch = $pdo->prepare("SELECT username FROM members");
$userSearch->execute([]);
$userSearchResult = [];
while ($row = $userSearch->fetch(PDO::FETCH_ASSOC)) {
    $userSearchResult[] = [
        'label' =>  $row['username'],
        'category' =>  "username"
    ];
}
// same to teamnames
$teamSearchResult = [];

$result = array_merge(
    $userSearchResult,
    $teamSearchResult
);

还有javascript：

$("#searchBox").catcomplete({
    source: <?php echo json_encode($result)?>
});