We're live-coding on Twitch! Join us!
How to Create a Sophisticated Suggest List for Your Web App Using Webix UI Library

How to Create a Sophisticated Suggest List for Your Web App Using Webix UI Library

As of today, you can come across auto-suggest or a suggest list almost everywhere, from social media websites like Facebook to big shopping platforms like Amazon. You can also often see this element in sophisticated data tables, where it acts as an information validation tool preventing users from entering wrong numbers, dates, names, surnames, etc. Hence, the main task of the suggestion list is to speed up data input allowing a user to enter the information into a table field or a search box quickly and сorrectly.

UI libraries considerably facilitate the creation of suggest lists. To put it in a nutshell, programmers get ready-made well-tested elements which can be effortlessly added to their apps. Webix UI library allows creating feature-rich customizable auto-suggest which can improve user experience to a great extent.

What types of auto-suggest can be created with Webix?

1. A suggest list appears after you start typing something into an input field (HTML input, Webix text, or a combo control).

1. You click an arrow of the rich select control to see the pop-up window with suggestions.

How does the Webix suggest list work with text input?

When you add the suggest list to the text editor or HTML input, its values are automatically filtered depending on the letters or numbers you type. You can either select an item from the list to fill in the input or ignore the suggestions and type all the data manually by yourself.

How to combine auto-suggest and Combo (editor)?

On the whole, when the suggest list is combined with Combo (editor), it follows the same pattern as with a text editor or HTML input: the values are filtered according to the characters you have just typed. You can either select an option from the drop-down list or type the text by yourself. The difference is that you can't enter the text if it doesn't match any items from the list.

###

How does the suggest list work with richselect?

The input field of richselect is non-editable. So, a popup appears the moment you click the empty space or an arrow of the control. In this case, you have to choose some value from the list.

How to attach the list to Webix components?

1. You can attach the list to an input field as a separate view. It can be done via the input property that points to the input ID.

webix.ui({
    view: "suggest",
    input: "country4", // will be linked to 'country4' input
    data: [
        {id:1, value: "Albania"},
        {id:2, value: "Bhutan"},
    //... list of suggest values can be as long as you wish
    ]
});

<input type="text" id="country4" value="Sweden" />

2. It is possible to initialize the suggestions as the same-name property of a JS text input, richselect, and combo.

{
    view:"text", name:"country", label:"Country", value:"Belarus",
    suggest:[
        {id:1, value: "Albania"},
        {id:2, value: "Bhutan"},
        // ...
    ]
}

3. You can also add the list as the same-name property of combo and richselect and take the extensive configuration:

webix.ui({
    view:"richselect", suggest:{
        data:[
            {id:1, value:"One"},
            {id:2, value:"Two"} //options list
        ],
        ready: function(){
            // defines the initially visible option
            $$("richselect_1").setValue(this.getFirstId());
        }
    }
});

See the code sample displaying how to initialize Webix suggest list.

How to load data to the suggest list?

A dataset for auto-suggest usually has several objects. You can arm them with the properties listed below or any other:

• The ID of the item. You can set it by yourself. If you don't, it will be done automatically. • Value. It's the data (numbers, letters and other symbols) that will be displayed in the items if you don't define another template. • $empty. This property shows that the item is empty and doesn't contain any data.

You can augment a suggest list with both client-side and server-side data.

**Auto-suggest with client-side data ** In this case, a list of options can be stored in any of the available formats. You may put it right into the data property or in a variable which you have to specify in advance.

var countries = [
    {id:1, value: "Albania"},
    {id:2, value: "Bhutan"}
];

{
    view:"text",
    label:"Country",
    value:"Belarus",
    suggest:countries
}

**Auto-suggest with server-side data ** As for data coming from the server-side, you have to set the script file which will get the information from the database.

As a value of the dataFeed property of the Suggest component

webix.ui({
    view: "suggest",
    input: document.getElementById("country4"),
    body:{
        dataFeed:"server/data.php"
    }
});

As a value of the suggest property
{
    view:"text",
    name:"country",
    label:"Country",
    value:"Albania",
    suggest:"server/data.php"
}

Suggest list is connected with an input field by suggest property included in the text constructor.

How to add auto-suggest to component editors?

On the one hand component editors are almost the same as editing controls. But on the other, you initialize them inside the body of the component.

It is also possible to add auto-suggest to the combo and text editors. To do this, create a list as a separate view or configure in a JSON object and set options for it. Then, build a component, specify the text editor type for it and link it to a suggest list.

var year_suggest_a = webix.ui({
    view: "suggest",
    data:[/_ ... _/]
});

//or
var year_suggest_a = {
    view: "suggest",
    data:[/_ ... _/]
};

webix.ui({
    view:"datatable",
    columns:[
        {id:"year", editor:"text", suggest:year_suggest_a}
    ]
});

You can also rely on API to customize suggest list behavior. The examples below show how you can add suggestions as a separate view and set options for it. You can also link the list to the input field of the editor object and provide handlers for edit events.

var year_suggest_b = webix.ui({
    view: "suggest",
    data:[...]
});

var gridb = webix.ui({
    view:"datatable",
    columns:[
        {id:"year", editor:"text"}
    ]
});


gridb.attachEvent("onAfterEditStart", function(object){
    if (object.column == "year") { //only for editors in this column
        var editor = this.getEditor(object);
        year_suggest_b.linkInput(editor.getInput());
    }
});

gridb.attachEvent("onAfterEditStop", function(object){
    year_suggest_b.hide();
});

It is also possible to equip the combo and richselect editors with auto-suggest. In this case, a user will be able to select items exclusively from the provided list. The capability which allows typing via the keyboard will be disabled.

webix.ui({
    view:"datatable",
    columns:[
        {id:"year", editor:"combo", suggest:{
            data:[/_ ... _/], //or url:""
            on:{
                //events
            }
        }}
    ]
});

How to customize a list of options?

The suggest list allows applying a bevy of custom settings.

When the list t is separate view:

{view:"suggest",
    //popup settings
    //...,
    body:{
        //list settings
    }
}}

When the list is a control/editor property:

{view:"combo", options:{
    //popup settings
    // ...,
    body:{
        //list settings
    }
}}

How to change the size and position of a popup? The Webix Suggest list displays maximum 10 items by default. If there are more items to show, a scrollbar appears. If there are fewer items in the list, its height shrinks. If these predefined settings don't suit you, it's possible to change the number of items using yCount property of the list object:

{view:"combo", suggest: {
    body:{
        yCount:5,
        data:[/_ ... _/]
    }
}}

A popup is usually tuned to fit the width of a master control. Anyway, you can effortlessly change it if you set the fitMaster property to false and state the desired width by yourself:

{view:"combo", suggest: {
    fitMaster:false,
    width:400,
    data:[/_ ... _/]
}}

The Suggest default positioning in relation to the text is bottom. The other available variants are top, left and right. Have a look at the example showing how you can define the position of the list:

{ view:"text", suggest:{ data:countries, relative:"left" }}

How to create suggest lists with amazing visual effect?

Webix offers advanced suggest controls for extra functionality and greater visual effect: CheckSuggest and MultiSuggest allow to select more than one item. GridSuggest presents items in the form of a table. DataSuggest makes the suggestions more colorful by allowing you to add images to them. DateRangeSuggest allows users to select the time range from the available dates. Check out the images of the mentioned controls below.

CheckSuggest

MultiSuggest GridSuggest

DataSuggest

DateRangeSuggest

Bottom line

UI libraries like Webix allow programmers to attach beautiful and feature-rich suggest lists to their applications. The ready-made elements usually can be effortlessly customized. As a result, software engineers get the components that perfectly suit their projects.

Like this article? Follow @https://twitter.com/WebixUI on Twitter