FuelUX Pillbox: can't get the selections dropdown working

Question

I'm using the current (v3.6.3) release of Fuel UX. I'd like to use the Pillbox control (http://getfuelux.com/javascript.html#pillbox).

With the code below I can free type new pills into the box but I can't get it to show a dropdown suggestion menu with a range of pre-defined values. I've checked the source code at https://github.com/ExactTarget/fuelux/blob/master/js/pillbox.js#L627 and also the sample code both in the example for onKeyDown with a callback, also copying the example in the source code at https://github.com/ExactTarget/fuelux/blob/master/js/pillbox.js#L735, but still no luck.

Here's the relevant section of my markup:

<div class="form-group">
  <label for="realName" class="col-sm-2 control-label">Groups</label>
  <div class="col-sm-5">
    <div class="pillbox" data-initialize="pillbox" id="groupsPillbox">
      <ul class="clearfix pill-group">
        <li class="pillbox-input-wrap btn-group">
          <input type="text" class="form-control dropdown-toggle pillbox-add-item" />
          <button type="button" class="dropdown-toggle sr-only"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
          <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"><li data-value='options'>options</li></ul>
        </li>
      </ul>
    </div>
    <input type="hidden" name="groups" tabindex=0></input>
  </div>
  <div class="col-sm-5 messageContainer">{{! validation message here}}</div>
</div>

And in my code:

$(document).ready(function() {

  $('#groupsPillbox').pillbox(
    {onKeyDown: function(event, data, callback){
      callback({data:[
        {text: Math.random(), value:'num1'},
        {text: Math.random(), value:'num2'}
      ]})
    }}
  );

});

This just throws an error in the console, Uncaught TypeError: callback is not a function. Any ideas?

Answer 1

data-initialize should be removed. Otherwise you are initializing twice.

onKeyDown only takes in two parameters. inputData and callback

See working example in this CodePen