MentionSuggest

MentionSuggest is a list of options for inputs. It can be combined with the Webix text field, the textarea control or a standard HTML input. MentionSuggest offers autocomplete options on the base of a trigger character ("@" by default) entered before a search query and shows up only if this character has been typed into the input.

Webix MentionSuggest basic use

Initialization

webix.ui({ 
    view:"textarea",
    height:200,
    width:500,
    labelPosition:"top",
    label:"Type some text here",
      suggest:{
        view:"mentionsuggest",
        symbol:"#",
        data:countries
     }      
});
  • symbol (string) - sets a symbol (a trigger character) for enabling mentionsuggest ("@" by default).

Related sample:  Mentionsuggest: Basic Initialization

Setting Multiple Suggests

You can set multiple suggest lists for one input, using different datasets and trigger characters.

Webix MentionSuggest Multiple Suggests

For these purposes, create a standalone MentionSuggest instance and specify a dataset and a desired trigger character in its constructor:

webix.ui({
    view:"mentionsuggest", id:"second", data:countries, symbol:"#"
});

And link a suggest list to the input field:

webix.$$("text").attachEvent("onAfterRender", function(){
    webix.$$("second").linkInput(this);
});
webix.$$("text").render();

Related sample:  Mentionsuggest: Multiple Suggests

Related Articles

Back to top