gpt4 book ai didi

jquery 自动完成,字体很棒

转载 作者:行者123 更新时间:2023-12-01 05:13:45 25 4
gpt4 key购买 nike

我想知道是否可以在自动完成列表中放置一个很棒的字体图标。

如果可以的话,我们可以更改 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com