Question

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

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

我已经分叉你的plunker并修改它以使预先工作：https://plnkr.co/edit/ICd8Oue3AmYusgGHLgS2?p=preview

两个变化：

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

我在afterAuiAttached中填充了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();
};

如果双击一个单元格，键入＆＃34; P＆＃34;例如，用鼠标选择一个项目。

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

Bootstrap typeahead在agGrid中不起作用

1 个答案: