Bootstrap 预输入在 agGrid 中不起作用答案

【问题标题】：Bootstrap typeahead not working in agGridBootstrap 预输入在 agGrid 中不起作用
【发布时间】：2017-08-09 20:53:29
【问题描述】：

我创建了一个页面，该页面呈现具有 2 列（城市、国家/地区）的 agGrid。我已使用“cellEditor”名称“TypeaheadCellEditor”将“City”列作为预输入。在这个 cellEditor 中，我正在使用本地数据调用预输入代码，但它不起作用。我尝试检查 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
  })
};

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

【问题讨论】：

您能否发布您遇到的错误
控制台没有错误。您可以在我发布的链接中运行演示（链接到 plnkr）。plnkr.co/edit/0kMK0bbebUOLbhZwmMkV?p=preview

标签： typeahead.js ag-grid bootstrap-typeahead

【解决方案1】：

我已经对你的 plunker 进行了 fork 并对其进行了修改以使 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”并用鼠标选择一个项目，这将起作用。

您可能希望监听（并覆盖）键盘事件以允许使用向上/向下箭头键，否则网格会将这些视为网格导航操作

【讨论】：