jQuery 自动完成添加图片

Question

我知道有很多主题解释了如何在 jQuery 中显示图像，但它们以不同的方式进行，因为在我的自动完成中，我的结果只显示在黑框中：

$(function() {
  var availableTags = [
    {label: "Math",value: "SPsadddddddddd",icon: "https://www.sem.com.tr/wp-content/themes/yootheme/cache/Forensics-Sample-Prep-banner-b5f6565e.jpg"},
    {label: "Function", value: "SsadsasadasdO",icon: "https://4.bp.blogspot.com/--FkmkfEJsdQ/Vubwk95uYzI/AAAAAAAAKZY/E5T0yFxcstgydc2ilTDbtjPFDOSI_KvVw/s1600/7.jpg"},
    {label: "Triangle", value: "PsadsadsdasdaA",icon: "jquery_32x32.png"},
    {label: "Square", value: "SsadsadsadsdaR",icon: "jquery_32x32.png"},
    {label: "Math",value: "SPsadddddddddd",icon: "https://4.bp.blogspot.com/--FkmkfEJsdQ/Vubwk95uYzI/AAAAAAAAKZY/E5T0yFxcstgydc2ilTDbtjPFDOSI_KvVw/s1600/7.jpg"},
    {label: "Function", value: "SsadsasadasdO",icon: "jquery_32x32.png"},
    {label: "Triangle", value: "PsadsadsdasdaA",icon: "jquery_32x32.png"},
    {label: "Square", value: "SsadsadsadsdaR",icon: "jquery_32x32.png"}, 
    {label: "Math",value: "SPsadddddddddd",icon: "https://4.bp.blogspot.com/--FkmkfEJsdQ/Vubwk95uYzI/AAAAAAAAKZY/E5T0yFxcstgydc2ilTDbtjPFDOSI_KvVw/s1600/7.jpg"},
    {label: "Function", value: "SsadsasadasdO",icon: "jquery_32x32.png"},
    {label: "Triangle", value: "PsadsadsdasdaA",icon: "jquery_32x32.png"},
    {label: "Square", value: "SsadsadsadsdaR",icon: "jquery_32x32.png"}
  ];
  $("#tags").autocomplete({
    source: availableTags,
    position: {
      my: "right top",
      at: "right bottom"
    },
    appendTo: '#li',
    select: function(event, ui) {
      $(this).val(ui.item.label).parents("label").submit();
      return false;
    },
    messages: {
      noResults: 'no results',
      results: function(amount) {
        return amount + 'results.'
      }
    }
  });
});
$(document).ready(function() {
  $('#tags').on('autocompleteselect', function(e, ui) {
    $('#kelime').show();
    $('#kelimeanlami').html('Word Definition ' + ui.item.value);
    $("#project-icon").attr("src", +ui.item.icon);
  });
});

#li {
  color: blanchedalmond;
}

#tags {
  width: 100%;
}

#gizli {
  position: fixed;
  display: none;
  top: 40px;
  width: 100px;
  height: 50px;
  left: 250px;
}

placeholder {
  color: white;
}

#kelime {
  width: 55%;
  display: none;
  margin: 10px auto;
  background: #333;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 4px 4px rgba(0, 0, 0, 0.2);
}

.kelime {
  background: transparent;
  width: 55%;
  border: 0;
  font-size: 30px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input id="tags" />

<div class="row">
  <div id="kelime" class="kelime" role="alert">
    <p id="kelimeanlami"></p>
    <img id="project-icon" src="" class="icon" alt=""></img>
  </div>
</div>

我不明白为什么它不起作用。你能解决这个问题吗，我的学校项目需要它。

Answer 1

从下一行中删除 + 符号。

$("#project-icon").attr("src", +ui.item.icon);

这将导致图像 src 变为 NaN。

<img id="project-icon" src="NaN" class="icon" alt="">

没有 + 它会工作得很好。检查下面的代码片段。

$(function() {
  var availableTags = [
    {label: "Math",value: "SPsadddddddddd",icon: "https://www.sem.com.tr/wp-content/themes/yootheme/cache/Forensics-Sample-Prep-banner-b5f6565e.jpg"},
    {label: "Function", value: "SsadsasadasdO",icon: "https://4.bp.blogspot.com/--FkmkfEJsdQ/Vubwk95uYzI/AAAAAAAAKZY/E5T0yFxcstgydc2ilTDbtjPFDOSI_KvVw/s1600/7.jpg"},
    {label: "Triangle", value: "PsadsadsdasdaA",icon: "jquery_32x32.png"},
    {label: "Square", value: "SsadsadsadsdaR",icon: "jquery_32x32.png"},
    {label: "Math",value: "SPsadddddddddd",icon: "https://4.bp.blogspot.com/--FkmkfEJsdQ/Vubwk95uYzI/AAAAAAAAKZY/E5T0yFxcstgydc2ilTDbtjPFDOSI_KvVw/s1600/7.jpg"},
    {label: "Function", value: "SsadsasadasdO",icon: "jquery_32x32.png"},
    {label: "Triangle", value: "PsadsadsdasdaA",icon: "jquery_32x32.png"},
    {label: "Square", value: "SsadsadsadsdaR",icon: "jquery_32x32.png"}, 
    {label: "Math",value: "SPsadddddddddd",icon: "https://4.bp.blogspot.com/--FkmkfEJsdQ/Vubwk95uYzI/AAAAAAAAKZY/E5T0yFxcstgydc2ilTDbtjPFDOSI_KvVw/s1600/7.jpg"},
    {label: "Function", value: "SsadsasadasdO",icon: "jquery_32x32.png"},
    {label: "Triangle", value: "PsadsadsdasdaA",icon: "jquery_32x32.png"},
    {label: "Square", value: "SsadsadsadsdaR",icon: "jquery_32x32.png"}
  ];
  $("#tags").autocomplete({
    source: availableTags,
    position: {
      my: "right top",
      at: "right bottom"
    },
    appendTo: '#li',
    select: function(event, ui) {
      $(this).val(ui.item.label).parents("label").submit();
      return false;
    },
    messages: {
      noResults: 'no results',
      results: function(amount) {
        return amount + 'results.'
      }
    }
  });
});
$(document).ready(function() {
  $('#tags').on('autocompleteselect', function(e, ui) {
    $('#kelime').show();
    $('#kelimeanlami').html('Word Definition ' + ui.item.value);
    $("#project-icon").attr("src", ui.item.icon);
  });
});

#li {
  color: blanchedalmond;
}

#tags {
  width: 100%;
}

#gizli {
  position: fixed;
  display: none;
  top: 40px;
  width: 100px;
  height: 50px;
  left: 250px;
}

placeholder {
  color: white;
}

#kelime {
  width: 55%;
  display: none;
  margin: 10px auto;
  background: #333;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 4px 4px rgba(0, 0, 0, 0.2);
}

.kelime {
  background: transparent;
  width: 55%;
  border: 0;
  font-size: 30px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input id="tags" />

<div class="row">
  <div id="kelime" class="kelime" role="alert">
    <p id="kelimeanlami"></p>
    <img id="project-icon" src="" class="icon" alt=""></img>
  </div>
</div>

jQuery 自动完成添加图片

jQuery autocomplete adding image

html

javascript

css

jquery

autocomplete