“Thanks God it’s Friday” – that’s what people say as they feel a great relief after a fruitful working week. I want to make this day even more happier and suggest the cure to a common developer problem – user inputs.
We all want to collect as much information from users as possible, while making this process predictable and controlled with respect to user freedom of choice. In this article we will try to squeeze through the variety of Webix combobox controls to solve this task.
As a teaser, I’m giving you the numbers: Webix offers 7 ready-made select widgets and 7 suggest lists for autocomplete options alongside with great possibilities to customize and mix them all to create an ultimate web combobox!
Masks off! What are the names of our heroes?
- Select – simple HTML-based select box for those who value traditions
- Richselect – Webix-crafted selector with the same functionality as the one above
- Multiselect – the next evolutionary step offering multiple choice
- Combo – editable combobox
- MultiCombo – multiple-choice editable combo (awesome!)
- Datepicker – date and time selector
- Colorpicker – color selector
All these controls allow selecting from predefined options that appear in a related popup. And the greatest mystery is that this suggest popup can be reused and customized.
But no fear, guys! If you need standard functionality, you can forget about all suggests and code briefly:
{ view:"richselect", label:"Fruit", options:["Banana", "Apple", "Papaya"]}
//date selector
{view:"datepicker", label:"Date"}
//color selector
{ view: "colorpicker", label:"Color"}
But if you require more settings or just want to learn how Webix comboboxes are constructed, dive deeper. The information below may cast some light on this topic.
Comboboxes in Theory
Each selector control (except for the old-school Select view) utilizes Webix popup that houses another Webix control: List, DataView, Datatable, Calendar or Colorboard.
The combination of a popup and an option list results in a configurable and reusable Suggest control with the following variations:
- Suggest – standard single-choice list of options used by Combo and Richselect
- Multisuggest – multiple-choice list
- Checksuggest – multiple-choice list with checkboxes used by Multicombo and MultiSelect
- Datasuggest – single-choice dataview, great for pictures
- Gridsuggest – single-choice datatable for tabular data
- Suggest with specific types: “calendar” and “colorboard”
Practice Time
Ok, you give me the knowledge, but what should I do with it? Let’s consider the cases where the above mentioned flexibility can be used.
Firstly, you can tune an option list to match any requirements. The basic customization scheme includes settings of a suggest itself and the list inside:
width:180, fitMaster:false,
body:{
template:"#name#",
data:["Banana", "Apple", "Papaya"]
}
}}
With Datepicker and Colorpicker you need to state suggest type:
type:"calendar", body:{
timepicker:true,
minDate:new Date()
}
}}
Secondly, you can share the same option list between several comboboxes. Just create a suggest as a standalone view and bind it to the necessary selectors:
view:"suggest", data:["Banana", "Apple", "Papaya"]
});
webix.ui({
view:"form",
elements:[
{ view:"richselect", label:"Richselect", options:suggest },
{ view:"combo", label:"Combo", options:suggest },
]
});
And thirdly, you can change the default suggest control for any combobox (but please be sensible). For instance, let’s provide a Multisuggest for a Multiselect combobox that uses Checksuggest by default:
view:"multisuggest", button:true,
body:{
data:["Banana", "Apple", "Papaya"]
}
}}
Combobox examples with Datasuggest and Gridsuggest are worth seeing as well, so I recommend you to consult the related documentation articles: Data Suggest and Grid Suggest.
I am not saying that Webix offers the best Javascript comboboxes on the market, but, guys, have you ever experienced such developer freedom? If yes, give us a link and we will make our framework even better 🙂
But please make sure that you have explored all the possibilities. Our combo widget documentation and samples can lead you into this country of miracles. Have a nice weekend and don’t forget to look out of the window as you practice 🙂
