图片添加到jQuery的自动完成搜索

我想在jQuery的自动完成搜索文本之前添加图像图片添加到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>

来源

2016-11-30 arpo

这工作：http://jsfiddle.net/mplungjan/mud9L7v0/ – mplungjan

它需要打开链接时，点击 – arpo

将href添加到一个 – mplungjan

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

来源

2016-11-30 17:40:50 mplungjan

图片添加到jQuery的自动完成搜索

回答

相关问题