I’ve been working with SlickGrid on a project recently and it has been fun to work with. It isn’t the best documented setup, but after a while I have figured out how to work with it on most levels giving me exactly what I want to work with. One of the things my users asked for is a Autocomplete function. I found a Stackoverflow question giving me the hint I needed in order to make this work. The only problem was the autocomplete example provided was using a static list. I wanted to have it build the list from that columns existing values and show a list, just like you get in Excel. So here is the init function where I set this up.
this.init = function () {
$input = $("");
$input.appendTo(args.container);
$input.focus().select();
temp = [];
j = 0;
for (i = 0; i < data.length; i++)
{
if (jQuery.inArray(data[i][args.column.id], temp) < 0)
{
temp[j] = data[i][args.column.id];
j++;
}
}
$input.autocomplete({
source: temp
});
$input.bind("keydown.nav", function(e) {
if ((e.keyCode == $.ui.keyCode.DOWN || e.keyCode == $.ui.keyCode.UP || e.keyCode == $.ui.keyCode.ENTER) && $('ul.ui-autocomplete').is(':visible'))
e.stopPropagation();
if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT)
e.stopImmediatePropagation();
});
};
