Smart Search Input

Smart search is an advanced search functionality that uses personalization, context understanding, auto-suggestions, and other techniques to improve the accuracy and relevance of search results. With SurveyJS, you can implement smart search using a custom composite component. This component allows you to combine multiple built-in question types into a single element and implement custom logic to handle user input. In this demo, the custom component finds industry and occupation codes based on free-form text input from users. Industry and occupation data is provided by the NIOCCS Industry and Occupation Coding Web API.

To create a custom smart search component, follow the steps below:

1. Create a custom SurveyJS component.
   Define a configuration object that implements the ICustomQuestionTypeConfiguration interface. Within this object, specify a unique name used to identify your component in code, a user-friendly title, and a defaultQuestionTitle to use for questions created using this component.

2. Configure input fields.
   To specify the input fields that component contains, populate the elementsJSON array with objects. Add one or more text input fields, which will act as search boxes, and radio button groups, which will be populated with autocomplete suggestions.

3. Update autocomplete suggestions.
   Each time users change the search box value, you need to update the autocomplete suggestions. To configure this behavior, implement the onValueChanged function.

4. Limit the maximum number of suggestions.
   A custom SurveyJS component can have its own properties that help you implement custom behavior. To add a component property, call the Serializer.addProperty(className, propMeta) method. Pass the name from step 1 as className and an object with property settings as propMeta. Call this method within the onInit function to add the property when the component is initialized. In this demo, we add a maxSuggestionCount property that specifies the maximum number of suggestions.

5. Register the SurveyJS component.
   To make your SurveyJS component recognizable by Form Library and Survey Creator, add its configuration object to the ComponentCollection. Refer to the code listing for a full code example.