在选项中添加图像
我想在列表打开时添加我的选项左边的图像，我正在使用awesomplete autocomplete plugin，我想添加一张图片来向您展示我想要做的事情。
我尝试添加内联css但没有任何改变
$(document).ready(function() {
$('.awesomplete').on('awesomplete-select', function() {
var $this = $(this),
$sibling = $this.next();
if ($sibling.attr('id') == 'mylist') {
setTimeout(function() {
var val = $this.find('input').val();
var dataLink = $sibling.find('option:contains("' + val + '")').data('link');
//console.log(dataLink);
location.href = dataLink;
}, 500);
}
});
});.awesomplete>ul {
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0, 0%, 100%, .9);
background: linear-gradient(to bottom right, white, hsla(0, 0%, 100%, .8));
border: 1px solid rgba(0, 0, 0, .3);
box-shadow: .05em .2em .6em rgba(0, 0, 0, .2);
text-shadow: none;
}
@supports (transform: scale(0)) {
.awesomplete>ul {
transition: .3s cubic-bezier(.4, .2, .5, 1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete>ul[hidden],
.awesomplete>ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
.awesomplete>ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0;
height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.awesomplete>ul>li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete>ul>li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
.awesomplete>ul>li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}<input class="awesomplete dropdown-input" list="mylist" id="my-input" />
<datalist id="mylist">
<option data-link="http://www.google.com">Ada</option>
<option data-link="http://www.yahoo.com">Java</option>
<option data-link="http://www.bing.com">JavaScript</option>
<option data-link="http://www.yandex.com">Brainfuck</option>
<option data-link="http://www.php.net">LOLCODE</option>
<option data-link="http://www.asp.net">Node.js</option>
<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>
2 个答案:
答案 0 :(得分：5)
您可以覆盖在标签前放置图像的单个项目的创建，例如：
var awesomplete = new Awesomplete(input, {
item: myItemFunc
});;
function myItemFunc(text, input){
//return the html to render an item
}
请参阅以下完整示例：
var imgList = new Object();
imgList["Ada"] = "http://www.maglioccola.com/images/add-1.png";
imgList["Java"] = "http://www.maglioccola.com/images/add-2.png";
imgList["JavaScript"] = "http://www.maglioccola.com/images/add-3.png";
imgList["Brainfuck"] = "http://www.maglioccola.com/images/add-4.png";
imgList["LOLCODE"] = "http://www.maglioccola.com/images/add-4.png";
imgList["Node.js"] = "http://www.maglioccola.com/images/add-4.png";
imgList["Ruby on Rails"] = "http://www.maglioccola.com/images/add-4.png";
$(document).ready(function() {
var input = document.getElementById("my-input");
var awesomplete = new Awesomplete(input, {
item: myItemFunc
});;
});
function myItemFunc(text, input){
return Awesomplete.$.create("li", {
innerHTML: createItem(text,input),
"aria-selected": "false"
});
}
function createItem(text, input){
var img = document.createElement("img");
img.style.height = '16px';
img.src = imgList[text.label];
var html = img.outerHTML + " " + text.label;
return html;
}.awesomplete>ul {
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0, 0%, 100%, .9);
background: linear-gradient(to bottom right, white, hsla(0, 0%, 100%, .8));
border: 1px solid rgba(0, 0, 0, .3);
box-shadow: .05em .2em .6em rgba(0, 0, 0, .2);
text-shadow: none;
list-style: none;
}
@supports (transform: scale(0)) {
.awesomplete>ul {
transition: .3s cubic-bezier(.4, .2, .5, 1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete>ul[hidden],
.awesomplete>ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
.awesomplete>ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0;
height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.awesomplete>ul>li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete>ul>li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
.awesomplete>ul>li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}<input list="mylist" id="my-input" />
<datalist id="mylist">
<option data-link="http://www.google.com">Ada</option>
<option data-link="http://www.yahoo.com">Java</option>
<option data-link="http://www.bing.com">JavaScript</option>
<option data-link="http://www.yandex.com">Brainfuck</option>
<option data-link="http://www.php.net">LOLCODE</option>
<option data-link="http://www.asp.net">Node.js</option>
<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>
我希望它可以帮助你，再见。
答案 1 :(得分：1)
试试这个，在这里你需要自定义awesomplete自动完成插件，我已编辑并复制到我的代码中
/*awesomplete.min.js customized and add above code in external file and link that here*/
// Awesomplete - Lea Verou - MIT license
(function(){function h(a){a=Array.isArray(a)?{label:a[0],value:a[1]}:"object"===typeof a&&"label"in a&&"value"in a?a:{label:a,value:a};this.label=a.label||a.value;this.value=a.value}function n(a,b,d){for(var g in b){var f=b[g],c=a.input.getAttribute("data-"+g.toLowerCase());a[g]="number"===typeof f?parseInt(c):!1===f?null!==c:f instanceof Function?null:c;a[g]||0===a[g]||(a[g]=g in d?d[g]:f)}}function c(a,b){return"string"===typeof a?(b||document).querySelector(a):a||null}function k(a,b){return l.call((b||
document).querySelectorAll(a))}function m(){k("input.awesomplete").forEach(function(a){new e(a)})}var e=function(a,b){var d=this;this.input=c(a);this.input.setAttribute("autocomplete","off");this.input.setAttribute("aria-autocomplete","list");b=b||{};n(this,{minChars:2,maxItems:10,autoFirst:!1,data:e.DATA,filter:e.FILTER_CONTAINS,sort:e.SORT_BYLENGTH,item:e.ITEM,replace:e.REPLACE},b);this.index=-1;this.container=c.create("div",{className:"awesomplete",around:a});this.ul=c.create("ul",{hidden:"hidden",
inside:this.container});this.status=c.create("span",{className:"visually-hidden",role:"status","aria-live":"assertive","aria-relevant":"additions",inside:this.container});c.bind(this.input,{input:this.evaluate.bind(this),blur:this.close.bind(this),keydown:function(a){var b=a.keyCode;if(d.opened)if(13===b&&d.selected)a.preventDefault(),d.select();else if(27===b)d.close();else if(38===b||40===b)a.preventDefault(),d[38===b?"previous":"next"]()}});c.bind(this.input.form,{submit:this.close.bind(this)});
c.bind(this.ul,{mousedown:function(a){var b=a.target;if(b!==this){for(;b&&!/li/i.test(b.nodeName);)b=b.parentNode;b&&0===a.button&&(a.preventDefault(),d.select(b,a.target))}}});this.input.hasAttribute("list")?(this.list="#"+this.input.getAttribute("list"),this.input.removeAttribute("list")):this.list=this.input.getAttribute("data-list")||b.list||[];e.all.push(this)};e.prototype={set list(a){if(Array.isArray(a))this._list=a;else if("string"===typeof a&&-1<a.indexOf(","))this._list=a.split(/\s*,\s*/);
else if((a=c(a))&&a.children){var b=[];l.apply(a.children).forEach(function(a){if(!a.disabled){var c=a.textContent.trim(),f=a.value||c;a=a.label||c;""!==f&&b.push({label:a,value:f})}});this._list=b}document.activeElement===this.input&&this.evaluate()},get selected(){return-1<this.index},get opened(){return!this.ul.hasAttribute("hidden")},close:function(){this.ul.setAttribute("hidden","");this.index=-1;c.fire(this.input,"awesomplete-close")},open:function(){this.ul.removeAttribute("hidden");this.autoFirst&&
-1===this.index&&this["goto"](0);c.fire(this.input,"awesomplete-open")},next:function(){this["goto"](this.index<this.ul.children.length-1?this.index+1:-1)},previous:function(){var a=this.ul.children.length;this["goto"](this.selected?this.index-1:a-1)},"goto":function(a){var b=this.ul.children;this.selected&&b[this.index].setAttribute("aria-selected","false");this.index=a;-1<a&&0<b.length&&(b[a].setAttribute("aria-selected","true"),this.status.textContent=b[a].textContent,c.fire(this.input,"awesomplete-highlight",
{text:this.suggestions[this.index]}))},select:function(a,b){a?this.index=c.siblingIndex(a):a=this.ul.children[this.index];if(a){var d=this.suggestions[this.index];c.fire(this.input,"awesomplete-select",{text:d,origin:b||a})&&(this.replace(d),this.close(),c.fire(this.input,"awesomplete-selectcomplete",{text:d}))}},evaluate:function(){var a=this,b=this.input.value;b.length>=this.minChars&&0<this._list.length?(this.index=-1,this.ul.innerHTML="",this.suggestions=this._list.map(function(d){return new h(a.data(d,
b))}).filter(function(d){return a.filter(d,b)}).sort(this.sort).slice(0,this.maxItems),this.suggestions.forEach(function(d){a.ul.appendChild(a.item(d,b))}),0===this.ul.children.length?this.close():this.open()):this.close()}};e.all=[];e.FILTER_CONTAINS=function(a,b){return RegExp(c.regExpEscape(b.trim()),"i").test(a)};e.FILTER_STARTSWITH=function(a,b){return RegExp("^"+c.regExpEscape(b.trim()),"i").test(a)};e.SORT_BYLENGTH=function(a,b){return a.length!==b.length?a.length-b.length:a<b?-1:1};e.ITEM=
function(a,b){var d=""===b?a:a.replace(RegExp(c.regExpEscape(b.trim()),"gi"),"<mark>"+"<img width='15px' src='http://www.download3k.com/icons/Opera-Mini-for-Java-388689.png'/>"+"$&</mark>");return c.create("li",{innerHTML:d,"aria-selected":"false"})};e.REPLACE=function(a){this.input.value=a.value};e.DATA=function(a){return a};Object.defineProperty(h.prototype=Object.create(String.prototype),"length",{get:function(){return this.label.length}});h.prototype.toString=h.prototype.valueOf=function(){return""+this.label};var l=Array.prototype.slice;c.create=function(a,b){var d=document.createElement(a),
g;for(g in b){var f=b[g];"inside"===g?c(f).appendChild(d):"around"===g?(f=c(f),f.parentNode.insertBefore(d,f),d.appendChild(f)):g in d?d[g]=f:d.setAttribute(g,f)}return d};c.bind=function(a,b){if(a)for(var d in b){var c=b[d];d.split(/\s+/).forEach(function(b){a.addEventListener(b,c)})}};c.fire=function(a,b,c){var e=document.createEvent("HTMLEvents");e.initEvent(b,!0,!0);for(var f in c)e[f]=c[f];return a.dispatchEvent(e)};c.regExpEscape=function(a){return a.replace(/[-\\^$*+?.()|[\]{}]/g,"\\$&")};
c.siblingIndex=function(a){for(var b=0;a=a.previousElementSibling;b++);return b};"undefined"!==typeof Document&&("loading"!==document.readyState?m():document.addEventListener("DOMContentLoaded",m));e.$=c;e.$$=k;"undefined"!==typeof self&&(self.Awesomplete=e);"object"===typeof module&&module.exports&&(module.exports=e);return e})();
/*awesomplete.min.js customized and add above code in external file and link that here*/
$(document).ready(function() {
$('.awesomplete').on('awesomplete-select', function() {
var $this = $(this),
$sibling = $this.next();
if ($sibling.attr('id') == 'mylist') {
setTimeout(function() {
var val = $this.find('input').val();
var dataLink = $sibling.find('option:contains("' + val + '")').data('link');
//console.log(dataLink);
location.href = dataLink;
}, 500);
}
});
});.awesomplete>ul {
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0, 0%, 100%, .9);
background: linear-gradient(to bottom right, white, hsla(0, 0%, 100%, .8));
border: 1px solid rgba(0, 0, 0, .3);
box-shadow: .05em .2em .6em rgba(0, 0, 0, .2);
text-shadow: none;
}
ul li{
list-style:none !important;
}
@supports (transform: scale(0)) {
.awesomplete>ul {
transition: .3s cubic-bezier(.4, .2, .5, 1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete>ul[hidden],
.awesomplete>ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
.awesomplete>ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0;
height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.awesomplete>ul>li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete>ul>li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
.awesomplete>ul>li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}<input class="awesomplete dropdown-input" list="mylist" id="my-input" />
<datalist id="mylist">
<option data-link="http://www.google.com">Ada</option>
<option data-link="http://www.yahoo.com">Java</option>
<option data-link="http://www.bing.com">JavaScript</option>
<option data-link="http://www.yandex.com">Brainfuck</option>
<option data-link="http://www.php.net">LOLCODE</option>
<option data-link="http://www.asp.net">Node.js</option>
<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？