jquery自动完成与php foreach生成的结果答案

【问题标题】：jquery autocomplete with php foreach generated resultsjquery自动完成与php foreach生成的结果
【发布时间】：2013-02-09 23:07:19
【问题描述】：

我几天来一直在尝试让 jquery 自动完成功能按我需要的方式工作。

到目前为止，我有这个工作正常：

<script>
$(function() {
var availableTags = [<?php 

$taglist = Array();
  foreach ($users as $user) 
    if ($user->getAttribute('first_name') == ''){
       $taglist[] = '"'.$user->getUserName().'"';
}else{
       $taglist[] = '"'.$user->getAttribute('first_name').' '.$user->getAttribute('last_name').'"';
}

echo join(',', $taglist); 

?>];

$("#searchmem").autocomplete({
    source: availableTags,
    minLength: 2,
    select: function(event, ui) { 
        $("#searchmem").val(ui.item.label);
        $("#submit").click(); 
    }
}).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li />")
        .data("item.autocomplete", item)
        .append("<a><img src='/files/avatars/1.jpg' />" + item.label + "</a>")
        .appendTo(ul);
    }
});
</script>

这将在相应用户的用户名或全名旁边输出图像 /files/avatars/1.jpg。

我遇到的问题是尝试输出正确的用户头像。每个 .jpg 文件都与用户名相对应，因此我可以在 src 中使用 $user->getUserID() 但这不起作用，因为它不在 foreach $users as $user 循环中。

我尝试将整个自动完成脚本放在 foreach 中，测试时确实会提醒正确的事情，但自动完成不起作用。

我也尝试过创建两个变量，例如

availableTags1 = { label: .... $user->getUserName() 等... }

availableTags2 = { 头像: .... $user->getUserID() 等... }

availableTags = availableTags1 + availableTags2;

和

.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li />")
    .data("item.autocomplete", item)
    .append("<a><img src=' + item.avatar + ' />" + item.label + "</a>")
    .appendTo(ul);
}

但这又没用。我完全迷路了！如何让它与相关用户名一起输出图像？非常感谢您的帮助。

【问题讨论】：

标签： php jquery image autocomplete foreach

【解决方案1】：

在你的情况下，你必须构建一个像这样的数组：

var availableTags = [
    {label: '...', avatar: '...'},
    {label: '...', avatar: '...'},
    ...
];

并使用：

.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li />")
    .data("item.autocomplete", item)
    .append("<a><img src='" + item.avatar + "' />" + item.label + "</a>") // Note the additional double quotes
    .appendTo(ul);
}

（有关使用自定义数据，请参阅 jQuery UI 上的此示例）

然后，要通过 PHP 生成数组，您应该使用：

<?php
$taglist = Array();
foreach ($users as $user) {
    $data = array();
    if ($user->getAttribute('first_name') == ''){
        $data["label"] = $user->getUserName();
    } else {
        $data["label"] = $user->getAttribute('first_name').' '.$user->getAttribute('last_name');
    }
    $data["avatar"] = $user->getUserID();
    $taglist[] = $data;
}
?>
var availableTags = <?php echo json_encode($taglist); ?>;

【讨论】：