Enable the Autocomplete Function


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "elements": [
    {
      "name": "car-brand",
      "title": "What is the brand of your car?",
      "description": "Start typing to see autocomplete predictions.",
      "type": "text",
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
    }
  ],
  "showQuestionNumbers": false
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Autocomplete Feature, Vuejs Example | JavaScript Libraries for Surveys and Forms</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-vue-ui/survey-vue-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<script src="https://unpkg.com/easy-autocomplete"></script>
<link rel="stylesheet" href="https://unpkg.com/easy-autocomplete@1.3.5/dist/easy-autocomplete.css">
    <script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.min.js"></script>

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                                    <survey :survey='survey' />
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

Sorry, we can't retrieve the data from server. Please comeback later.

Autocomplete is a word completion feature that displays predictive text based on the entered characters and allows respondents to fill a survey field after they enter only a few characters. This example demonstrates and describes how to add this feature to your survey. Start typing into the input field to see autocomplete suggestions.

The autocomplete functionality is built upon a third-party EasyAutocomplete jQuery plugin. Reference the plugin's script and style sheet on your page. You should also reference a script that integrates the SurveyJS Form Library with third-party libraries (surveyjs-widgets.js). Open the HTML tab and copy the links from there.

To create a survey question with enabled autocomplete, configure a regular Text question and then specify a choices array for it. Populate the array with autocomplete suggestions. This configuration activates the autocomplete functionality automatically.

Third-party libraries: EasyAutocomplete ( MIT-licensed )

Enable the Autocomplete Function

Why we use cookies.