Вопрос:

Любой способ использовать изображение с выбором списка?

javascript jquery css

152 просмотра

1 ответ

1228 Репутация автора

Я использую плагин awesomplete autocomplete и пытаюсь добавить изображение в список выбора в течение нескольких месяцев, но я не могу этого сделать, разве нет способа использовать изображение с автозаполнением или выбором?

Я говорю об этом:

введите описание изображения здесь

<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, потому что это не кросс-браузер

Автор: ani_css Источник Размещён: 23.04.2017 07:59

Ответы (1)


1 плюс

770 Репутация автора

Решение

Предложения с другой меткой и значением также поддерживаются. Метка будет отображаться в автозаполнении, а значение будет вставлено во вход.

<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>
Автор: Vanya Avchyan Размещён: 23.04.2017 08:37
Вопросы из категории :
32x32