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(); }); };