7ph / vue-smart-suggest Goto Github PK

Vue Smart Suggest is a lightweight vue library offering dynamic, context-sensitive suggestions for your text areas. It can be fully customized with custom components and weights less than 3kb minified and gzipped.

Check out the documentation website to try it out 😊

Like this project? Give a star 🌟

1. Install using a package manager

   npm i --save vue-smart-suggest
   # or
   yarn add vue-smart-suggest

2. Import SmartSuggest and define suggestion trigger(s)

   import { SmartSuggest, Trigger } from 'vue-smart-suggest';
   
   const userMentionTrigger: Trigger = {
       char: '@',
       items: [{ value: 'Joe' }, { value: 'Jane' }],
   };

   *minimal example, check Trigger type definition to see all options

3. Enhance a text area with <SmartSuggest />

   <SmartSuggest :triggers="[userMentionTrigger]">
       <textarea />
   </SmartSuggest>

4. That's it, your textarea will show up suggestions as you type @!

5. Check-out the customization guide or the API to get the most of this library

• This library requires vue 3.x.
• This library has a single dependency, textarea-caret which helps finding the position of the cursor inside a text area.

Documentation

• Try out a simple demo on the documentation website.
• For styling tips, check the customization guide.
• Check out the api documentation for reference.
• Admire the >98% coverage report

Having trouble? Found a bug? Want to contribute? Any kind of contribution is welcome. If you have any questions, please open an issue or create a pull request.