Bootstrap 提前输入在 agGrid 中不起作用

Question

我创建了一个页面，该页面呈现具有 2 列（城市、国家/地区）的 agGrid。我使用 'cellEditor' 名称 'TypeaheadCellEditor' 将 'City' 列作为预输入。在这个 cellEditor 中，我正在使用本地数据调用 typeahead 代码，但它不起作用。我尝试检查 DOM，预输入建议的 ul 不可见。

function TypeaheadCellEditor() {}
TypeaheadCellEditor.prototype.init = function(params) {
  this.eInput = document.createElement('input');
  this.eInput.setAttribute("id", "search1");
  this.eInput.setAttribute("data-provide", "typeahead");
  this.eInput.setAttribute("data-items", "4");
  this.eInput.setAttribute("class", "span3");
  this.eInput.value = params.value;
  var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
  $('#search1').typeahead({  
    source: subjects
  })
};

同时，我在这个网格上方的文本框中使用了相同的预输入代码，它在那里工作。我有演示 here

Answer 1

我已经 fork 了你的 plunker 并修改了它以使 typeahead 工作：https://plnkr.co/edit/ICd8Oue3AmYusgGHLgS2?p=preview

两个变化：

我已将编辑器设为弹出式编辑器，以便可以显示预先输入的下拉菜单
```
TypeaheadCellEditor.prototype.isPopup = function () {
    return true;
};
```

我在 afterGuiAttached 中填充 typeahead - 在此之前元素可能不存在，在这种情况下 jquery 找不到它

// focus and select can be done after the gui is attached
TypeaheadCellEditor.prototype.afterGuiAttached = function () {
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
    $('#search1').typeahead({
      source: subjects
    },'json')
    this.eInput.focus();
};

如果您双击一个单元格，现在可以使用鼠标键入 "P" 和 select 一个项目。

您可能想要监听（并覆盖）键盘事件以允许 up/down 箭头键，否则网格会将这些视为网格导航操作

Bootstrap 提前输入在 agGrid 中不起作用

Bootstrap typeahead not working in agGrid

bootstrap-typeahead

typeahead.js

ag-grid