javascript - Adding image in option -
i want add image left of option when list opened , i'm using awesomplete autocomplete plugin , i'd add picture show want do.
i try add inline css nothing change
$(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>
you override creation of single item putting image before label, like:
var awesomplete = new awesomplete(input, { item: myitemfunc });; function myitemfunc(text, input){ //return html render item } see following complete example:
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>i hope helps you, bye.
Comments
Post a Comment