作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想知道是否可以在自动完成列表中放置一个很棒的字体图标。
如果可以的话,我们可以更改 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/
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我正在开发一个 rdp 虚拟 channel 应用程序。我已经在注册表中注册了客户端 dll 并试图理解,客户端 dll 已加载。但是当从 pEntryPoints 调用 pVirtualChanne
是否可以通过 GPRS(USB 棒)绑定(bind)(聚合)多个连接并将其用作 Linux 中的一个链接? 最佳答案 技术上是可行的。 Linux 有一个名为 bonding 的模块它可以将多个接口(
我的主容器 div 可以刷新,所以它的内容被隐藏/显示。当我的容器 div 隐藏时,我的页脚会弹出。 html 结构如下所示: 注意我已经试过了: 而且它似乎不起作用,当隐藏容器 div 时,页脚 d
我有一个问题,我可以使用 wpa_suppli 进行无线连接 cant on some network, but i need to connect on a network where the SS
我是一名优秀的程序员,十分优秀!