TagBox Custom Widget
Open in new window

Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

window.survey = new Survey.Model({
    pages: [
        { name:"page1", questions: [
            { type: "checkbox", isRequired:true, choicesByUrl: { url: "https://restcountries.eu/rest/v1/all" }, name: "countries", title: "Please select all countries you have been for the last 3 years." }
        ]}
    ]
});

survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});


var widget = {
    name: "tagbox",
    htmlTemplate: "<div></div>",
    isFit : function(question) { return question.name == 'countries'; },
    afterRender: function(question, el) {
        var widget = $(el).dxTagBox({
            items: question.visibleChoices,
            value: question.value,
            searchEnabled: true,
            displayExpr: "text",
            valueExpr: "value",
            onValueChanged: function (e) {
                question.value = e.value;
            }
        }).dxTagBox("instance");
        //It requires when choices fills on ajax callback, using choicesByUrl property.
        question.choicesChangedCallback = function() {
            widget.option("items", question.visibleChoices);
        }
        question.valueChangedCallback = function() {
            widget.option("value", question.value);
        }
    },
     willUnmount: function(question, el) {
       $(el).off().remove();
     } 
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);
$("#surveyElement").Survey({
    model: survey
});



<!DOCTYPE html>
<html>

<head>
    <title>Welcome to JQuery</title>
    <script src="https://unpkg.com/jquery"></script>
    
    <script src="https://surveyjs.azureedge.net/0.12.18/survey.jquery.js"></script>
    
    
    <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script>
    <link href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" type="text/css" rel="stylesheet">
    <link href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>
</body>

</html>

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}