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

时间:2017-05-23 13:32:30

标签: php jquery arrays autocomplete

我可以成功使用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

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

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

1 个答案:

答案 0 :(得分: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)?>
});