javascript - 将图像添加到 jquery 自动完成搜索

Question

我正在尝试在 jquery 自动完成搜索中的文本之前添加图像

我使用下面的代码，它可以工作，但没有显示图像，那么如何使图像在文本之前显示

$(document).ready(function() {
  $("input#autocomplete").autocomplete({
    source: [{
        value: "NYC",
        img: 'http://www.uidownload.com/files/974/95/760/new-york-icon.png',
        url: 'http://www.example.com'
      }, {
        value: "LA",
        img: 'https://www.shareicon.net/data/128x128/2015/09/17/642167_cinema_512x512.png',
        url: 'http://www.example.com'
      },

      {
        value: "Peru",
        img: 'http://tvmak.com/img/alsatm.jpg',
        url: 'http://www.example.com'
      }
    ],
    select: function(event, ui) {
      window.location = ui.item.url;

    }
  });
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


<search style="font-size:62.5%;">

  <input id="autocomplete" />

</search>

Answer 1

$(function() {
  var projects = [{
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "http://w.g5outdoors.com/trackrecord/jquery-ui/development-bundle/demos/autocomplete/images/jquery_32x32.png",
    href: "https://jquery.com/"
  }, {
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "http://w.g5outdoors.com/trackrecord/jquery-ui/development-bundle/demos/autocomplete/images/jqueryui_32x32.png",
    href: "https://jqueryui.com/"
  }, {
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "https://www.brainyquote.com/favicon-32x32.png",
    href: "https://jquery.com/"

  }];
  $(".field_values").autocomplete({
    source: projects,
    create: function() {
      $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
        return $('<li>')
          .append('<a href="' + item.href + '"><img class="icon" src="' + item.icon + '" />' + item.label + '<br>' + item.value + '</a>')
          .appendTo(ul);
      };
    }
  });
});

.icon {
  width: 20px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/black-tie/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input class="field_values" />