Get new jQuery plugins just once a week

×

bootstrap-suggest

FavoriteLoadingAdd to favorites

July 24, 2015

bootstrap-select | jQuery plugin suggest dropdowns in textarea

A jQuery plugin for bootstrap that pops-up a dropdown in textarea or input textbox.

Created by Jovanni Lo

Download

Example

bootstrap-suggest plugin

textarea autocomplete


bootstrap-suggest

A jQuery plugin for bootstrap that pops-up a dropdown in textarea or input textbox.

demo

Markup

<div class="form-group">
   <label for="comment">start typing with @</label>
   <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

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

// using users data
$('#comment').suggest('@', {
  data: users,
  map: function(user) {
    return {
      value: user.username,
      text: '<strong>'+user.username+'</strong> <small>'+user.fullname+'</small>'
    }
  }
});

// using ajax: http://lodev09.github.io/bootstrap-suggest/#init-with-ajax-
$('#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: '<strong>'+user.username+'</strong> <small>'+user.fullname+'</small>'
    }
  }
});

API

http://lodev09.github.io/bootstrap-suggest/#api

Credits

All bugs, feature requests, pull requests, feedback, etc., are welcome!

Bootstrap Components

License

Released under the Apache License, Version 2.0. See LICENSE file.

Copyright 2014, Jovanni Lo / @lodev09 / www.lodev09.com / lodev09@gmail.com

bootstrap-suggest

Related posts:

International Telephone Input
location-picker
selectator
bootstrap-suggest plugin

http://jquer.in/wp-content/uploads/2015/07/bootstrap-suggest.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever