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);
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Autocomplete Feature, Reactjs 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/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.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-react-ui/survey-react-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%;">
</div>
<div id="surveyResult"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>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.