我正在使用awesomplete autocomplete plugin而我正在尝试将图片添加到我的选择列表中一个月,但我无法做到是否有任何方式使用带有自动完成功能的图片或选择?
我在说这个:
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.css" rel="stylesheet"/>
<input class="awesomplete" list="mylist" />
<datalist id="mylist">
<option>Ada</option>
<option>Java</option>
<option>JavaScript</option>
<option>Brainfuck</option>
<option>LOLCODE</option>
<option>Node.js</option>
<option>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>
结束我不想使用内联css,因为它不是跨浏览器
答案 0 :(得分:1)
也支持具有不同标签和值的建议。标签将显示在自动完成中,值将插入输入中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.css" rel="stylesheet"/>
<input id="myinput" />
<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>
<script>
var input = document.getElementById("myinput");
// Show label but insert value into the input:
new Awesomplete(input, {
list: [
{ label: "<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUxdD-Q4nIx3uIg9jBCe1oT5a9MHuWY5_pW4FoZSU-nQd1Y_WJPQ'/> Faceboock", value: "https://www.facebook.com/" },
{ label: "<img src='https://hydra-media.cursecdn.com/dota2.gamepedia.com/thumb/2/25/Pounce_icon.png/16px-Pounce_icon.png?version=77c984fc4a9c8ca491ead081322fa738'/> Youtube", value: "https://www.youtube.com/" },
{ label: "China", value: "CN" },
{ label: "United States", value: "US" }
]
});
// You can search for a better version
$(document).find('.awesomplete').on('click',function(e)
{
if($('#myinput').val())
window.location = $('#myinput').val();
//console.log($('#myinput').val());
});
</script>