Question

我已经使用自动完成功能进行了此输入搜索。它将图像加上标签附加到列表中的ul，并且工作得很好。但是我也想将图像附加到名为包装器的div上。我是这个中的佼佼者，你可以跟两个不同的追加者吗？

继承我的代码：

    <body>
        <div class="wrapper"
            <div id="project-label">Select:</div>
            <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">

            <input id="project">
            <input type="hidden" id="project-id" value="flower">
            <p id="project-description"></p>

        </wrapper> 
</body>

<script>
     $(function () {
       var projects = [
            {
                value: "Flower",
                label: "Flower",
                desc: "Beautiful flowers",
                icon: "flower.jpeg"
            },
            {
                value: "Rose",
                label: "R",
                desc: "roses are red violets are blue",
                icon: "rose.jpg"
            },
            {
                value: "Tulip",
                label: "tulip",
                desc: "lalala",
                icon: "tulip.jpg"
            }
        ];

        $( "#project" ).autocomplete({
          minLength: 1,
          source: projects,
          focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
          },
          select: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            $( "#project-id" ).val( ui.item.value );
            $( "#project-description" ).html( ui.item.desc );
            $( "#project-icon" ).attr( "src", "img/" + ui.item.icon );

            return false;
          }
        })
        .autocomplete( "instance" )._renderItem = function( ul, item ) {
          return $( "<li>" )

          .append("<a><img src='img/" + item.icon + "' />" + item.label + "</a>")
            .appendTo(ul)

</script>

所以我想要的是在第一个之后再添加一个像这样的附件：

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

.append("<a><img src='img/" + item.icon + "' />" + "</a>")
        .appendTo(".wrapper")

这显然不起作用，但你可以修改它以便它起作用吗？

Answer 1

如果你想为一个项目提供两个条目，我建议在你的_renderItem函数中使用这一行：

return $("<li><a><img src='img/" + item.icon + "' />" + item.label + "</a></li><li><a><img src='img/" + item.icon + "' />" + "</a></li>").appendTo(ul);

彼此追加两次

1 个答案: