Selectize Js Manually Add Some Items

Does tweaking your Selectize.js application sound like a plan? Maybe you've got this awesome project on the go and want to give your users the option to add items manually? Well, you're in luck, as adding items manually is totally doable - and I'm here to show you just how simple it can be!

Selectize.js provides a super convenient way to enhance your select boxes by offering features like autocomplete, tagging, and more. But what if you want to let users manually input items into the select box? The good news is that Selectize.js supports this functionality right out of the box.

Let's dive right in. To start, you need to get a handle on your Selectize instance. If you haven't already set it up, make sure you have included Selectize.js in your project. Once that's sorted, you can target your select element and initialize your Selectize instance. Here's a quick refresher:

var $select = $('#my-select').selectize({
  // your options here
});
var selectize = $select[0].selectize;

Now that you've got your Selectize instance, adding items manually is a piece of cake! You can simply call the `addOption()` method followed by the `addItem()` method to add and select the item programmatically:

var item = { id: 1, title: 'New Item' };
selectize.addOption(item);
selectize.addItem(item.id);

In this snippet, we first define an object `item` with the properties you want your new item to have. Then, we add this new item as an option using `addOption()`. Finally, we select this newly added item by its `id` using `addItem()`.

If you want to handle the process when a user enters a new item in the input field, you can use Selectize's `create` option. By setting `create` to `function(input) {}`, you can define your custom logic to handle the creation of new items. Here's an example:

var $select = $('#my-select').selectize({
  create: function(input) {
    return { id: input, title: input };
  }
});

In this snippet, when a user inputs a new item that does not exist in the select box, the `create` function is triggered. Inside this function, you can return an object representing the new item, which will be added to the select box.

When working with Selectize.js, remember that you have the power to customize the user experience in various ways. Adding items manually is just one of the many ways you can tailor your select box to meet your project's needs.

So, there you have it! With just a few lines of code, you can empower your users to manually add items to your Selectize.js select box. Now, go ahead and unleash your creativity with Selectize.js — happy coding!