Question

我正在使用Fuel UX的当前版本（v3.6.3）。我想使用Pillbox控件（http://getfuelux.com/javascript.html#pillbox）。

使用下面的代码，我可以免费在盒子中输入新的药片，但我无法显示带有一系列预定义值的下拉菜单建议菜单。我已检查https://github.com/ExactTarget/fuelux/blob/master/js/pillbox.js#L627处的源代码以及onKeyDown示例中的示例代码callback，同时复制源代码中的示例{{3}但是，但仍然没有运气。

这是我的标记的相关部分：

<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：无法获得选择下拉列表

1 个答案: