实现CSS，显示自动完成的图像

Question

我的自动填充效果很好，但是当我输入内容并选择它时，我需要不仅显示文字，还会显示如下图片：

<div class="input-field col s6">
  <input type="text" id="autocompleteGood" class="autocomplete">
  <label for="autocompleteGood">Товар</label>
</div>

$(document).ready(function() {
  $('#autocompleteGood').autocomplete({
    data: {
      'Apple': null,
      'Microsoft': null,
      'Google': 'images/juna.jpg'
    },
 });

Answer 1

您需要使用$ winpty heroku login 函数自定义自动填充实例中的数据。

＆＃13;

＆＃13;

_renderItem

＆＃13;

$(function() {
  var projects = [{ // JSON Object
      "id": 1,
      "label": "China",
      "image": "http://www.androidbegin.com/tutorial/flag/china.png"
    },

    { // JSON Object
      "id": 2,
      "label": "India",
      "image": "http://www.androidbegin.com/tutorial/flag/india.png"
    },

    { // JSON Object
      "id": 3,
      "label": "United States",
      "image": "http://www.androidbegin.com/tutorial/flag/unitedstates.png"
    },

    { // JSON Object
      "id": 4,
      "label": "Indonesia",
      "image": "http://www.androidbegin.com/tutorial/flag/indonesia.png"
    },

    { // JSON Object
      "id": 5,
      "label": "Brazil",
      "image": "http://www.androidbegin.com/tutorial/flag/brazil.png"
    },

    { // JSON Object
      "id": 6,
      "label": "Pakistan",
      "image": "http://www.androidbegin.com/tutorial/flag/pakistan.png"
    },

    { // JSON Object
      "id": 7,
      "label": "Nigeria",
      "image": "http://www.androidbegin.com/tutorial/flag/nigeria.png"
    },

    { // JSON Object
      "id": 8,
      "label": "Bangladesh",

      "image": "http://www.androidbegin.com/tutorial/flag/bangladesh.png"
    },

    { // JSON Object
      "id": 9,
      "label": "Russia",
      "image": "http://www.androidbegin.com/tutorial/flag/russia.png"
    },

    { // JSON Object
      "id": 10,
      "label": "Japan",
      "image": "http://www.androidbegin.com/tutorial/flag/japan.png"
    }
  ];


  $("#autocompleteGood").autocomplete({
      minLength: 2,
      source: projects,
      focus: function(event, ui) {
        $("#autocompleteGood").val(ui.item.label);
        return false;
      },
      select: function(event, ui) {
        $("#autocompleteGood").val(ui.item.label);
        $("#autocompleteGood").attr("name", ui.item.id);
        $("#autocompleteGood").attr("desc", ui.item.image);

        return false;
      }
    })
    .autocomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .append("<div><image style='height:50px;width:60px;' src=" + item.image + "/>" + item.label + "(" + item.id + ")" + "</div>")
        .appendTo(ul);
    };
});

＆＃13;

ul.bs-autocomplete-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow: auto;
  z-index: 9999;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.4);
}

ul.bs-autocomplete-menu a {
  font-weight: normal;
  color: #333333;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-state-active,
.ui-state-focus {
  color: #23527c;
  background-color: #eeeeee;
}

.bs-autocomplete-feedback {
  width: 1.5em;
  height: 1.5em;
  overflow: hidden;
  margin-top: .5em;
  margin-right: .5em;
}

.loader {
  font-size: 10px;
  text-indent: -9999em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #333;
  background: -moz-linear-gradient(left, #333333 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #333333 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #333333 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #333333 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #333333 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before {
  width: 50%;
  height: 50%;
  background: #333;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}

.loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

＆＃13;

＆＃13;

＆＃13;