JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>
<select style="width:300px" id="datasource-lexicon">
    <optgroup label="Isikud">
        <option value="M" data-img="personXL.png">Margus</option>
        <option value="K" data-img="personXL.png">Kaja</option>
        <option value="L" data-img="personXL.png">Liisi</option>
        <option value="E" data-img="personXL.png">Ervin</option>
        <option value="T" data-img="personXL.png">Tanel</option>
    </optgroup>
    <optgroup label="Ettevõtted" >
        <option value="U" data-img="businessBig.png">UpTime</option>
        <option value="Ä" data-img="businessBig.png">Äripäev</option>
    </optgroup>
</select>
<input type="hidden" class="bigdrop" id="datasearch-lexicon" style="width:600px"/>

CSS

.answerImg-lexicon{
    height: 1em;
    padding-top:4px;
}

JavaScript

var url='http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/';
function format(state) {
    var elem = state.element;
    if ( $(elem).data('img')==null ) return state.text;
    return "<img class='answerImg-lexicon' src='"+url+$(elem).data('img')+"'> &nbsp" + state.text;
}
$("#datasource-lexicon").select2({
    placeholder: "Otsi",
    minimumInputLength: 1,
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; },
    allowClear: true
});
    function lexiconResult(movie) {
        var markup = "<table class='movie-result'><tr>";
        if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
            markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
        }
        markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
        if (movie.critics_consensus !== undefined) {
            markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
        }
        else if (movie.synopsis !== undefined) {
            markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
        }
        markup += "</td></tr></table>";
        return markup;
    }

    function lexiconSelection(movie) {
        return movie.title;
    }


$("#datasearch-lexicon").select2({
    placeholder: "Search for a movie",
    minimumInputLength: 1,
    ajax: function(element, callback) {
        var id=$(element).val();
        if (id!=="") {
            $.ajax("http://nugakala.aripaev.ee:8983/solr/people/select?q=E_nimi%3A*"+term+"&sort=Ettevotte_nimi+asc&fl=Registrikood,Ettevotte_nimi,Ettevotte_tegevusala&wt=json&indent=true&rows=2147483647&json.wrf=parseBusinessesResponseJSON&group=true&group.field=Registrikood&group.sort=Ettevotte_nimi+asc&callback=jsonp1").done(function(data) { callback(data); });
        }
    },
    formatResult: lexiconResult, // omitted for brevity, see the source of this page
    formatSelection:...