FuelUX Pillbox：无法使选择下拉菜单正常工作

Question

我使用的是当前 (v3.6.3) 版本的 Fuel UX。我想使用 Pillbox 控件 (http://getfuelux.com/javascript.html#pillbox)。

使用下面的代码，我可以在框中自由输入新药丸，但我无法让它显示带有一系列预定义值的下拉建议菜单。我已经检查了 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 的源代码，但还是不行。

这是我标记的相关部分：

<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>

在我的代码中：

$(document).ready(function() {

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

});

这只会在控制台中引发错误，Uncaught TypeError: callback is not a function。有什么想法吗？

Answer 1

data-initialize 应该被删除。否则你正在初始化两次。

onKeyDown 只接受两个参数。 inputData 和 callback

参见 this CodePen

中的工作示例

FuelUX Pillbox：无法使选择下拉菜单正常工作

FuelUX Pillbox: can't get the selections dropdown working

fuelux