A jQuery plugin for bootstrap that pops-up a dropdown in textarea or input textbox
Demo
### Markup
```html
```
### Data
```
var users = [
{username: 'lodev09', fullname: 'Jovanni Lo'},
{username: 'foo', fullname: 'Foo User'},
{username: 'bar', fullname: 'Bar User'},
{username: 'twbs', fullname: 'Twitter Bootstrap'},
{username: 'john', fullname: 'John Doe'},
{username: 'jane', fullname: 'Jane Doe'},
];
```
### Init
```javascript
$('#comment').suggest('@', {
data: users,
map: function(user) {
return {
value: user.username,
text: ''+user.username+' '+user.fullname+''
}
}
})
```
### Init (with Ajax)
Ajax is supported by having the data function return a jqXHR object. The function takes a single parameter containing the mention text string.
```javascript
$('#comment').suggest('@', {
data: function(q) {
if (q && q.length >= 3) {
return $.getJSON("users/lookup.json", { q:q });
}
},
map: function(user) {
return {
value: user.username,
text: ''+user.username+' '+user.fullname+''
}
}
})
```
API
### Initialize
#### Single suggest
`$('#textarea').suggest(key [, options])`
#### Multiple suggest
`$('#textarea').suggest({key: options, key2: options})`
### Options
| option | type | default | description |
| -- | --- | --- | --- |
| data | array/function | [] | an array (of objects or string) or a callback function |
| map | callback | _undefined_ | a callback function that is used to map the display and value of each item |
| filter | object | { casesensitive: true, limit: 5} | option that will let you set the filter behaviour |
| onshow(e) | event callback | _none_ | triggered when the dropdown is shown |
| onselect(e, item) | event callback | _none_ | triggered after selecting the item |
| onlookup(e, item) | event callback | _none_ | triggered when searching for an item |
| dropdownClass | string | "" | additional class of the dropdown |
| position | string/object/function | "caret" | position of the dropdown menu. string values: _bottom_, _top_, _caret_ |
### Events
| event | params | description |
| --- | --- | --- |
| show | _none_ | triggered when the dropdown is shown |
| select | object item | triggered after selecting the item |
| lookup | object item | triggered when searching for an item |
### Methods
| method | params | description |
| --- | --- | --- |
| get | int index | returns an `object` item |
| lookup | string q | search for an item given by the `q` (query) string |
### Properties
| property | type | description |
| --- | --- | --- |
| $element | jQuery | the element |
| $items | array | items array (jquery objects) |
| key | string | the main key |
| isShown | boolean | `true` if the dropdown is shown |
| query | string | current `q` (query) |
