Twitter Like @Mentions Auto Suggesting Plugin with jQuery - Bootstrap Suggest

File Size: 116 KB
Views Total: 20987
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Twitter Like @Mentions Auto Suggesting Plugin with jQuery - Bootstrap Suggest

Bootstrap Suggest is a jQuery plugin which allows to implement Twitter style username autocomplete/autosuggest feature on your textarea elements.

Enter a character (default: @) inside the textarea and you will see the dropdown list populated with suggestions.

Currently supports both Bootstrap 4 and Bootstrap 3. Licensed under the Apache License, Version 2.0.

How to use it:

1. Load Bootstrap's stylesheet and bootstrap-suggest.css in the document head section.

<link href="/bootstrap.min.css" rel="stylesheet">
<link href="/bootstrap-suggest.css" rel="stylesheet">

2. Load jQuery library and bootstrap-suggest.js at the bottom of the document.

<script src=""></script>
<script src="js/bootstrap-suggest.js"></script>

3. Create an array of usernames for the autocomplete/autosuggest list.

var users = [
  {username: 'User 1', fullname: 'User Name 1'},
  {username: 'User 2', fullname: 'User Name 2'},
  {username: 'User 3', fullname: 'User Name 3'},

4. Call the plugin on the textarea and specify the data source. You can replace the "@" with any other characters as you wish.

$('textarea').suggest('@', {
  // or an external JSON data file
  data: users,

  // style the autocomplete/autusuggest list
  map: function(user) {
    return {
      value: user.username,
      text: '<strong>'+user.username+'</strong> <small>'+user.fullname+'</small>'

4. All the options and callbacks.

data: [],
map: undefined,
filter: {
  casesensitive: false,
  limit: 5
dropdownClass: '',
position: 'caret',
// events hook
onshow: function(e) {},
onselect: function(e, item) {},
onlookup: function(e, item) {}


v2.1.0 (2019-12-18)

  • Removed unused dataitem assignment

v2.0 (2019-02-18)

  • Supports bootstrap 4 and contenteditable that uses jquery.caret


  • Update bootstrap-suggest.js


  • Code correction


  • v1.3.7


  • fixed for multiple instance.


  • return the limit if q is empty


  • AJAX support fix


  • update.


  • in IE9 selectionStart will always be 0 if not focused(when selecting using the mouse)


  • Fixes bugs on IE.


  • Fixes Chrome losing field focus with user mouse click


  • Update bootstrap-suggest.js

This awesome jQuery plugin is developed by lodev09. For more Advanced Usages, please check the demo page or visit the official website.