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="http://code.jquery.com/jquery-1.11.1.min.js"></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) {}

Changelog:

v2.1.0 (2019-12-18)

• Removed unused dataitem assignment

v2.0 (2019-02-18)

• Supports bootstrap 4 and contenteditable that uses jquery.caret

2018-09-27

• Update bootstrap-suggest.js

2018-06-30

• Code correction

2017-09-12

• v1.3.7

2016-12-20

• fixed for multiple instance.

2016-05-28

• return the limit if q is empty

2016-03-15

• AJAX support fix

2016-02-02

• update.

2015-12-24

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

2015-10-18

• Fixes bugs on IE.

2015-08-26

• Fixes Chrome losing field focus with user mouse click

2015-02-03

• 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.