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>

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();
           $('#jqxPopover').jqxPopover({
                width: 200,
                height: 160,
                showArrow: true,
                showCloseButton: true,
                position: 'bottom',
                selector: $("#button"),
                title: 'Title'
            });
        });
        $('.ipSymbol').on('click', (e) => {
            console.log(e.currentTarget.innerText);
            $('#jqxPopover').jqxPopover('close'); 
        })