Using selectize input
By: Yihui Xie
To create a selectize input, you can use the function
selectizeInput(), and the usage is very similar to
A major difference between the usage of
selectInput() is the
options argument, which is a list of parameters to initialize the selectize input. Please check out the usage documentation of selectize.js for all the possible parameters. This example shows a side by side comparision between selectize and select input.
When we type in the input box, selectize will start searching for the options that partially match the string we typed. The searching can be done on the client side (default behavior), when all the possible options have been written on the HTML page. It can also be done on the server side, using R to match the string and return results. This is particularly useful when the number of choices is very large. For example, when there are 100,000 choices for the selectize input, it will be slow to write all of them at once into the page, but we can start from an empty selectize input, and only fetch the choices that we may need, which can be much faster. We will introduce both types of the selectize input below.
The selectize input returns the item(s) that you selected, but keep in mind that it may also return an empty string when all the selected items are deleted using the key
We can make use of the
options argument to specify a list of initialization options. Here are some quick examples:
Of course, you can combine multiple options, e.g.
You may use
choices = NULL to create an empty selectize instance, so that it will load quickly initially, then use
updateSelectize(server = TRUE) to pass the choices
data to R. Here
data can be an arbitrary R data object, such as a (named) character vector, or a data frame. Note the client-side selectize can only accept a character vector for the
What happens when we type in the text box is:
- the character string in the text box is sent to R, and split into multiple keywords using white spaces;
- R matches each keyword in the variable(s) specified in the
searchFieldoption of selectize initialization options;
- depending on the
'or'), the results from each keyword are combined using
- the first
maxOptionsrecords of the
datais returned (as JSON);
When we use the server version of selectize, we may want to define the
render method for selectize, although normally the default rendering method should just work. A custom rendering method allows us to create richer content in the drop-down list, instead of just some plain text options. This example shows how we can render images in the options.
options element of the
escape. Please read the selectize.js documentation to understand what they mean. Basically you can treat
item as a record in the
data that we passed in as
choices. For example, if
choices = state.name, an
item might be
You can define the rendering method for
This means we create a
div for each of the items, and the
div contains their values. This is a very simple example, and we can use more complicated data objects, and write rendering methods accordingly. Here is a quick example:
Then in the drop-down list, we will see the name of the car in bold text, and the variables
am in the parentheses (e.g. Mazda RX4 (MPG: 21.0, Transmission: manual)).
If you have questions about this article or would like to discuss ideas presented here, please post on RStudio Community. Our developers monitor these forums and answer questions periodically. See help for more help with all things Shiny.