Ag Grid Autocomplete in edit cell

Question

I need to implement Autocomplete feature in ag grid cell on the table. Is ag provides any options for that. I am just seeing select with options. But my need is to edit the cell and while start typing the values has to display below based the character.

Answer 1

Like you I could not find this feature. I decided to write an Angular component for this purpose and share it.

It has the ability to filter by starting to type, as well as clicking the selection by mouse. Keyboard arrow up and down navigation is also included.

It's a simple component and should be quite straightforward to edit to your likings, or take the code and implement in JS or a different framework if you are not using Angular. I am having some unfortunate cosmetic issues (primarily on the last column of the grid), which I hopefully can solve soon and then will update the repository.

https://github.com/superman-lopez/ag-grid-auto-complete

Edit:

Since my original post, a new project has started and this is not limited to Angular projects:

https://github.com/avallete/ag-grid-autocomplete-editor

Answer 2

You can use a jQuery autocomplete as part of the cell editor. You have to do it in the afterGuiAttached function of the custom editor so it won't run until after your input has been created.

// function to act as a class
function YourCustomEditor () {}

// gets called once before the renderer is used
YourCustomEditor.prototype.init = function(params) {
            this.eInput = document.createElement('input');
            this.eInput.setAttribute('class', 'inputClass');
            this.eInput.setAttribute('type', 'text');
        }
};   

YourCustomEditor.prototype.afterGuiAttached = function() {
        $('.inputClass').autocomplete({
            source: function(request, response) {
                // Do your autocomplete filtering here
            },
            datatype: 'json',
            select: function(event, ui) {
                // Do Stuff on select 
            }
        });
  this.eInput.focus();
};