Html5 ComboBox

Bind to the open event by type: jqxComboBox. Author: http://jqwidgets.com

by mark edwards

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<center><button id="button">Click me</button></center>
    
        <div id="jqxPopover">
          <center>
           <div class='ipGrid' id="jqxPopover">
            <div class='ipSymbol'>θ</div>
            <div class='ipSymbol'>ʃ</div>
            <div class='ipSymbol'>t</div>
            <div class='ipSymbol'>ʊ</div>
            <div class='ipSymbol'>ʌ</div>
            <div class='ipSymbol'>ʒ</div>
            <div class='ipSymbol'>ʊ</div>
            <div class='ipSymbol'>ʔ</div>
            <div class='ipSymbol'>ᵊ</div>
            <div class='ipSymbol'>ʳ</div>
            <div class='ipSymbol'>→</div>
            <div class='ipSymbol'>ᵗ</div>
            <div class='ipSymbol'>æ</div>
            <div class='ipSymbol'>ɑ</div>
            <div class='ipSymbol'>ð</div>
            <div class='ipSymbol'>ɚ</div>
            <div class='ipSymbol'>ə</div>
            <div class='ipSymbol'>ɛ</div>
           </div>
          </center>
        </div>
<textarea id="editor"></textarea>

CSS

.ipGrid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #2196F3;
  padding: 2px;
}

.ipSymbol {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 2px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

JavaScript

$(document).ready(function () {            
            $("#button").jqxButton();
           
});
$('.ipSymbol').on('click', (e) => {
    console.log(e.currentTarget.innerText);
    $('#jqxPopover').jqxPopover('close'); 
})
$('#editor').jqxEditor({
    height: 400,
    width: 500,
    theme: 'energyblue',
    tools: 'datetime ',
    createCommand: function (name) {
        switch (name) {
            case "datetime":
                return {
                    type: 'list',
                    tooltip: "Insert Date/Time",
                    init: function (widget) {
                        widget.jqxPopover({
                            width: 200,
                            height: 160,
                            showArrow: true,
                            showCloseButton: true,
                            position: 'bottom',
                            //selector: $("#button"),
                            title: 'Title'
                         })           
                    },
                    refresh: function (widget, style) {
                        // do something here when the selection is changed.
                        widget.jqxDropDownList('clearSelection');
                    },
                    action: function (widget, editor) {
                        
                        return {
                            command: "inserthtml",
                            value: editor
                        };
                    }
                }
                
        }
    }
});