JavaScript Smart TextArea Control

Overview

The JavaScript Smart TextArea is an AI-powered text area component that offers real-time sentence autocomplete, boosting productivity and reducing typing effort.

Intelligent autocomplete

The Smart TextArea goes beyond simple word suggestions by predicting full sentences based on user input. Whether composing emails, filling out forms, or drafting content, the AI-driven autocomplete feature minimizes typing time by offering smart, context-aware suggestions. These suggestions are not random but contextually relevant and precise, enhancing the overall input experience.

User role

The User Role option defines the context of the autocompletion based on the role of the person typing. Some example roles include:

• Customer service agent responding to client inquiries.
• Project manager drafting a status update for the team.

User phrases

The User Phrases option provides predefined expressions that align with your application’s tone and frequently used content. This could include standard phrases, important URLs, or policies. For example:

• “Thank you for your interest.”
• “Please let me know if you have any further questions.”

These predefined phrases deliver personalized and contextually relevant autocompletion suggestions.

Customizable UI

Tailor the appearance of suggestions in the customizable suggestion pop-up window to take full control of the user experience.

• Suggestions displayed in the pop-up window.

• Suggestions displayed inline.

Inherited features

Since it’s built on top of Syncfusion’s JavaScript TextArea component, the Smart TextArea inherits all the features of the TextArea component, including form support, floating labels, and customizable styling.

Other supported frameworks

The Smart TextArea control is also available in Blazor, React, Angular, and Vue frameworks. Check out the different Smart TextArea platforms at the links below:

• Blazor Smart TextArea

• React Smart TextArea

• Angular Smart TextArea

• Vue Smart TextArea

JavaScript Smart TextArea code example

Get started with the JavaScript Smart TextArea using just a few lines of HTML and TS code as demonstrated below. Also, explore our JavaScript Smart TextArea example that shows you how to render and configure a Smart TextArea in JavaScript.

<div class="control-section">
    <div class="content-wrapper">
        <div>
            <!--element that is going to render the Smart TextArea-->
           <textarea id="default"></textarea>
        </div>
    </div>
</div>

import { SmartTextArea } from  '@syncfusion/ej2-inputs';
/**
 * Sample for CSS input boxes.
 */
let textareaObj: SmartTextArea = new SmartTextArea({
    placeholder: 'Enter your queries here',
    floatLabelType: 'Auto',
    resizeMode: 'Both',
    rows: 3,
    cols: 35,
    userRole: 'Employee communicating with internal team',
    userPhrases: [
        "Please find the attached report.",
        "Let's schedule a meeting to discuss this further.",
        "Can you provide an update on this task?",
        "I appreciate your prompt response.",
        "Let's collaborate on this project to ensure timely delivery."
    ],
    aiSuggestionHandler: serverAIRequest
});
textareaObj.appendTo('#default');