combo box as free text editor with text suggestion

Webix JS
1

I want wo have a combo box (used in datatable/treetable) where i can enter free text that will remain, even when there is no matching suggest list entry.
i.E. my list contains “Latte macchiato” and “Cappuccino”,
but i want to be able to enter “Latte macchiato with hazelnut” or even “Espresso” :wink:
Is there a standard way for this?

2

There is not such a ready filter. But you can create a custom filter:

http://docs.webix.com/datatable__headers_footers.html#customheaderandfootercontent

3

Sorry, thats not what i want… its not about filtering a datatable.

Its about entering data, a Text field, where a suggest list in the background gives text suggestions. Like in google. when you start to enter it gives you search suggests. can use it, but don’t need to.

(actually in comparison to google search I DONT need live from the database search, because only few suggest list entries.)

4

If you are using collection, the selected value must correspond one of the options.

You can try to use the following workaround:

// create own editor based on "combo"
webix.editors.mycombo = webix.extend({
   getValue:function(){
	var value = webix.editors.combo.getValue.apply(this,arguments);
	var inputValue = this.getInputNode().value;
	if(!value && (value != inputValue)){
		value = inputValue;
	}
	return value;
   }
}, webix.editors.combo);

...
var namesCollection = [...];
// define a custom template for the column with this editor
webix.ui({
    view:"datatable",
    columns:[
	...				
	{ id:"name",  editor:"mycombo", 
           collection: namesCollection,
           template: function(obj){
                return namesCollection[obj.name] || obj.name;
            }
        }
     ]
});
5

works GREAT. You should implement that into standard as option!

6

The other possible solutin will be to use “text” editor with suggest attached.

http://docs.webix.com/samples/15_datatable/04_editing/14_autosuggest.html

7

maria’s sample: http://webix.com/snippet/4532469f

8

and little more generalized…
http://webix.com/snippet/01717893

9

Hi, I tried to use Maksim’s solution with “text” editor with suggest attached as he showed in http://docs.webix.com/samples/15_datatable/04_editing/14_autosuggest.html

It did not work for me and it also does not (anymore ?) work in the above example from Maksim. Has anything changed here in syntax or functionality ?

10

Hi @fendrikat,
As far as I can see, autosuggest works fine.
Please try to edit the Released column in the snippet:
https://snippet.webix.com/503d6cad

11

Hello, @annazankevich,
…thank you for your feedback…yes, sorry, my mistake, I expected slightly different behavior, but you are right - if I press a 1 or 2 I get filtered values or when clearing the field I get the full list.
Thanks so much,
Frank