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);
            });
        
            
                ko.applyBindings({ model: survey }, document.getElementById("surveyElement"));
            

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Autocomplete Feature, Knockoutjs 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/knockout@3.5.1/build/output/knockout-latest.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-knockout-ui/survey-knockout-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 params="survey: model"></survey>
                            </div>
    <div id="surveyResult"></div>

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

</body>
</html>
Loading...
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 )

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.