jQuery 自动完成添加图像

Question

I know there lots of topics which explains how to show image in jQuery but they do in a different way because in my autocomplete my results are just shown in a black box:

 $(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>

I couldn't understand why it doesn't work. Can you please fix this, I need it for my school project.

Answer 1

Remove the + symbol from the following line.

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

This will result in the image src becoming NaN .

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

Without the + it will work just fine. Check the code snippet below.

 $(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>