JSFiddle - React, Tailwind, and code Playground

by rosenfeld

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>

JavaScript

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];

$.widget('ui.multioptions', $.ui.autocomplete, {
    _renderItem: function(ul, item) {
  //      console.log(window.t=this,window.ul = ul, window.item=item)
        var result = this._super(ul, item)
        var input = $('<input type=checkbox />')
        var el = this.element        
        result.on('click',
                 function(ev){
                     console.trace(ev)
                     el.focus()
                     ev.stopPropagation()
                     ev.stopImmediatePropagation()
                     ev.preventDefault()
                     input.prop('checked', !input[0].checked).change()
                 })
        result.prepend(input)
        return result
    }
})

$("#tags").multioptions({
    source: availableTags
});