Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="https://rawgit.com/Mottie/Keyboard/master/js/jquery.keyboard.extension-autocomplete.js"></script>
<div id="wrap">
  <input id="keyboard" type="text" />
</div>

CSS

.ui-autocomplete-category {
  font-weight: bold;
  color: blue;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
}


/* https://github.com/Mottie/Keyboard
 * Autocomplete extension demo
   Documentation for this extension can be found at
   https://github.com/Mottie/Keyboard/wiki/Setup#autocomplete
 
 * Use the physical or virtual keyboard and start typing any
 * of the available autocomplete tags listed in the javascript frame
*/

body {
  font-size: 10px;
  margin-top: 200px;
}

#wrap {
  display: block;
  margin: 0 auto;
  width: 200px;
}

JavaScript

$(function() {
  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.category != currentCategory) {
          ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    }
  });
  var data = [{
    label: "anders",
    category: ""
  }, {
    label: "andreas",
    category: ""
  }, {
    label: "antal",
    category: ""
  }, {
    label: "annhhx10",
    category: "Products"
  }, {
    label: "annk K12",
    category: "Products"
  }, {
    label: "annttop C13",
    category: "Products"
  }, {
    label: "anders andersson",
    category: "People"
  }, {
    label: "andreas andersson",
    category: "People"
  }, {
    label: "andreas johnson",
    category: "People"
  }];

  $('#keyboard')
    .keyboard()
    .catcomplete({
      delay: 0,
      source: data
    })
    .addAutocomplete({
      // custom autocomplete has unique data
      // To find the name, enter $('#keyboard').data()
      // in the console and look for a matching widget
      // data name
      data: 'catcomplete',
      events: 'catcomplete',
      // add autocomplete window positioning
      // options here (using position utility)
      position: {
        of: null,
        my: 'right top',
        at: 'left top',
        collision: 'flip'
      }
    })

  // activate the typing extension
  .addTyping({
    showTyping: true,
    delay: 250
  });
});