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) |