Extension Autocomplete

Autocomplete (Demo)

Integrate with jQuery UI Autocomplete

Setup

Page Head

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- jQuery UI theme or Bootstrap (optional, if you create a custom theme) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery UI position utility (optional, if you position the keyboard yourself) -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<!-- keyboard widget css & script -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<script src="js/jquery.keyboard.extension-autocomplete.js"></script>

<!-- optional plugins -->
<script src="js/jquery.mousewheel.js"></script>

Javascript

// target a specific keyboard, or use $('.ui-keyboard-input') to target all
$('#keyboard')
  // keyboard plugin - see the full list of options above.
  .keyboard(options1)
  // jQuery UI autocomplete
  // go to http://jqueryui.com/autocomplete/ for a complete
  // list of options
  .autocomplete(options2)
  // keyboard autocomplete extension
  .addAutocomplete({
    // set position of autocomplete popup
    position: {
      of: null,
      my: 'right top',
      at: 'left top',
      collision: 'flip'
    },
    // custom autocomplete widget settings
    data: '',
    events: ''
  });

If you create a custom autocomplete widget, like this example from the jQuery UI docs, you'll need to also set the custom data and event names (added v1.26.3). These usually match the custom widget name - see this demo.

$(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
    });
});

Options

position

jQuery UI position utility settings specifically for the autocomplete popup.

Default:

{
  of : null,
  my : 'right top',
  at : 'left top',
  collision: 'flip'
}

Type: Object (jQuery position utility settings)

data

Custom autocomplete widget data key. Any custom autocomplete widget has unique data. To find the name, enter $('#keyboard').data() in the console and look for a matching widget data name. Add that name to this setting. In the setup example above, the data is set to "catcomplete", matching the name of the customized autocomplete widget.

Default: ""
Type: String

event

Custom autocomplete widget event prefix. Any custom autocomplete widget adds unique event names. The event name should always match the widget data key, and falls back to use the data key name when this option is undefined. This option was added just-in-case a different event prefix is needed.

Default: "autocomplete"
Type: String

Methods

Destroy

This method was added to autocomplete extension v1.11.4.

Destroy the extension after destroying the autocomplete plugin as follows:

$( "#keyboard" ).autocomplete( "destroy" );
$( "#keyboard").getkeyboard().autocomplete_destroy();