SlickGrid Autocomplete

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.