Create a User-Defined Item

Besides selecting the existing values, a user can add new values to the TagBox. To enable this feature, assign true to the acceptCustomValue option. Note that you should implement the onCustomItemCreating handler to create a new entry to the data source.

<div id="tagBoxContainer"></div>
var tagBoxData = new{
    store: [
        { id: 1, firstName: "Andrew" },
        { id: 2, firstName: "Nancy" },
        { id: 3, firstName: "Steven" }

    dataSource: tagBoxData,
    valueExpr: 'id',
    displayExpr: 'firstName',
    acceptCustomValue: true,
    onCustomItemCreating: function(e){
        // Generates a new 'id'
        var nextId = Math.max.apply(Math, tagBoxData.items().map(function(c) { return; })) + 1;
        // Creates a new entry
        var newItem = { id: nextId, firstName: e.text };
        // Adds the entry to the data source;
        // Reloads the data source

        return newItem;
See Also