我想知道是否可以在自动完成列表中放置一个很棒的字体图标。
如果可以的话，我们可以更改 font-awesom 图标样式吗？ (比如颜色和字体大小？)
JQUERY
$(function () {
var currencies = [
{value: '<i class=fas fa-cog></i>'+'Spring', desc: 'Techno'},
{value: 'J2EE', desc: 'Techno'},
{value: 'Delphi', desc: 'Techno'},
{value: 'HTML/CSS', desc: 'Techno'},
{value: 'PL/SQL', desc: 'Techno'},
{value: 'PHP', desc: 'Techno'},
{value: 'C#', desc: 'Techno'},
{value: 'Javascript', desc: 'Techno'},
{value: 'AngularJS', desc: 'Techno'},
{value: 'Liferay ', desc: 'Techno'},
{value: 'Shell', desc: 'Techno'},
{value: '<i class=fas fa-mobile-alt></i>+Agranet', desc: 'Appli'},
{value: 'Etoile', desc: 'Appli'},
];
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = suggestion.value;
var html_tag_hidden = $($('.tag_competence_search')[0]).clone();
html_tag_hidden.show();
$(html_tag_hidden.children()[0]).html(thehtml);
$('#nav-test').append(html_tag_hidden);
}
});
});
最佳答案
检查下面的代码，我已更正它，看看这是否有效。使用源代码代替查找。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script> -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Document</title>
</head>
<body>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1" style="border-right: none; background: white">
<i class="fas fa-search"></i>
</span>
</div>
<div class="tag_competence_search">ssdds</div>
<input type="text" class="form-control" id="autocomplete" aria-label="Recipient's username"
aria-describedby="basic-addon2" style="padding-left: 5px; border-left: none">
</div>
<script>
$(function() {
var currencies = [{
value: 'Spring',
desc: 'Techno'
},
{
value: 'J2EE',
desc: 'Techno'
},
{
value: 'Delphi',
desc: 'Techno'
},
{
value: 'HTML/CSS',
desc: 'Techno'
},
{
value: 'PL/SQL',
desc: 'Techno'
},
{
value: 'PHP',
desc: 'Techno'
},
{
value: 'C#',
desc: 'Techno'
},
{
value: 'Javascript',
desc: 'Techno'
},
{
value: 'AngularJS',
desc: 'Techno'
},
{
value: 'Liferay ',
desc: 'Techno'
},
{
value: 'Shell',
desc: 'Techno'
},
{
value: 'Agranet',
desc: 'Appli'
},
{
value: 'Etoile',
desc: 'Appli'
},
];
$('#autocomplete').autocomplete({
source: currencies,
onSelect: function(suggestion) {
var thehtml = suggestion.value;
console.log(thehtml)
var html_tag_hidden = $($('.tag_competence_search')[0]).clone();
html_tag_hidden.show();
$(html_tag_hidden.children()[0]).html(thehtml);
$('#nav-test').append(html_tag_hidden);
}
}).autocomplete("instance")._renderItem = function(ul, item) {
// console.log(item.label)
return $('<li class="ui-menu-item-with-icon"></li>')
.data("item.autocomplete", item)
.append("<i class='fab fa-500px'></i>"+item.label)
.appendTo(ul);
};
});
</script>
</body>
</html>
关于jquery 自动完成，字体很棒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55102840/