edit cell with an instant search like proposition

[Xavier Combelle]

Hi!

I would like offer to my users an cell editable content but with an instant search like proposition for example
someone typing "mouse" in a cell would have a list like where to chose (with possibility to chose none of them but the edited one) :

mouse - pointing device
house mouse - small rodent of the genus Mus
mouse - Vernacular name for species from the family Muridae
Mouse - documentary film 
mouse - small model of (fragment of) Zermelo-Fraenkel set theory with desirable properties
mousetrap
...

The content of the list would be returned by an ajax call

Any idea ?

For anyone interested, it's for offer a tabular way to edit wikidata (https://www.wikidata.org) content 

[Steve Zlamany]

I use some code in the Slick.Editors.js file - and associated the column with this editor function.  Uses a standard jQuery autocomplete for the input = I pre-load the contents of the selection and save it from use to use.

AutocompleteEditor: function(args) {

var $input;

var $autoInput;

var defaultValue;

var scope = this;

//var isValid = false;

this.init = function() {

//args.column.actb = acs-acctlookupinput

// need to get : acs-panel1-heading_acs-acctlookupinput_autocomplete_hidden

var myString = $(args.container).closest(".acs-ddreflector").attr("id"); // this is hardwired - it needs to come from somewhere - maybe we need to pass it?

//$(args.container).closest(".acs-ddreflector").attr("id");

var autoString = myString + "-heading_" + args.column.actb;

$input = $("#" + autoString);

$input.autocomplete('enable');

autoString = autoString + "_autocomplete_hidden";

$autoInput = $("#" + autoString); //.clone(); // why isnt this working? It returns something weird?

//$input.attr("style", "display:inline"); // this should make the copy visible but it never shows up

$input.bind("keydown.nav", function(e) {

if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT || e.keyCode === $.ui.keyCode.DOWN || e.keyCode === $.ui.keyCode.UP) {

e.stopImmediatePropagation();

}

});

$autoInput.appendTo(args.container);

$input.appendTo(args.container);

$input.focus().select();

};

this.destroy = function () {

var strIdTo = '#' + $(args.container).closest(".acs-ddreflector").attr("id") + '-heading-acs-autocomplete-hidden-div'

$input.appendTo(strIdTo).val(''); //"#acs-autocomplete-hidden-div");

$autoInput.appendTo(strIdTo).val(''); //"#acs-autocomplete-hidden-div");

};

this.focus = function() {

$input.focus();

};

this.loadValue = function(item) {

defaultValue = item[args.column.field];

$input.val(defaultValue);

$input[0].defaultValue = defaultValue;

$input.select();

};

this.serializeValue = function() {

return $input.val();

};

this.applyValue = function(item, state) {

item[args.column.field] = state;

};

this.isValueChanged = function() {

return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);

};

this.validate = function() {

var matcher = new RegExp($.ui.autocomplete.escapeRegex($input.val().toLowerCase()), "i");

var arraytoreturn = $.grep($input.autocomplete("option", "source"), function(value) {

return matcher.test(value.label || value.value || value);

});

var isAuto = false;

for (var i = 0; i < arraytoreturn.length; i++) {

if (arraytoreturn[i].label.toLowerCase() == $input.val().toLowerCase()) {

isAuto = true;

}

}

return {

valid: isAuto,

msg: "You must select an option from the autocomplete list."

};

};

this.init();

}

};

 

--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Xavier Combelle]

thanks a lot I will try