0

私は、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 内に配置しようとしましたが、テストすると正しいことが警告されましたが、オートコンプリートは機能しませんでした。

また、次のような2つの変数を作成しようとしました

availableTags1 = { ラベル: .... $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);
}

しかし、これもうまくいきませんでした。私は完全に迷っています！関連するユーザー名と一緒に画像を出力するにはどうすればよいですか? 助けていただければ幸いです。

4

1 に答える 1

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); ?>;
于 2013-02-09T23:24:23.487 に答える