Breaking News: Grepper is joining You.com. Read the official announcement!

bootstrap-tagsinput

Add Answer

Yellowed Yak answered on December 4, 2020 Popularity 9/10 Helpfulness 1/10

answer bootstrap-tagsinput

related boostrap input tag

related bootstrap input tagsinput

bootstrap-tagsinput

Comment

<input type="text" />
<script>
var cities = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: 'assets/cities.json'
});
cities.initialize();

var elt = $('input');
elt.tagsinput({
  tagClass: function(item) {
    switch (item.continent) {
      case 'Europe'   : return 'label label-primary';
      case 'America'  : return 'label label-danger label-important';
      case 'Australia': return 'label label-success';
      case 'Africa'   : return 'label label-default';
      case 'Asia'     : return 'label label-warning';
    }
  },
  itemValue: 'value',
  itemText: 'text',
  typeaheadjs: {
    name: 'cities',
    displayKey: 'text',
    source: cities.ttAdapter()
  }
});
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    });
elt.tagsinput('add', { "value": 4 , "text": "Washington"  , "continent": "America"   });
elt.tagsinput('add', { "value": 7 , "text": "Sydney"      , "continent": "Australia" });
elt.tagsinput('add', { "value": 10, "text": "Beijing"     , "continent": "Asia"      });
elt.tagsinput('add', { "value": 13, "text": "Cairo"       , "continent": "Africa"    });
</script>

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: bootstrap-tagsinput.github.io

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Jun 07 2022

Yellowed Yak

0 Answers Avg Quality 2/10

Closely Related Answers

boostrap input tag

Comment

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

Popularity 10/10 Helpfulness 4/10 Language html

Source: getbootstrap.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Apr 12 2021

Blue Baboon

0 Answers Avg Quality 2/10

bootstrap input tagsinput

Comment

<select multiple data-role="tagsinput">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Washington">Washington</option>
  <option value="Sydney">Sydney</option>
  <option value="Beijing">Beijing</option>
  <option value="Cairo">Cairo</option>
</select>

Popularity 10/10 Helpfulness 2/10 Language html

Source: bootstrap-tagsinput.github.io

Tags: html

Link to this answer
Share Copy Link

Contributed on Dec 04 2020

Annoying Anaconda

0 Answers Avg Quality 2/10

bootstrap-tagsinput

Contents

More Related Answers

bootstrap-tagsinput

Closely Related Answers

boostrap input tag

bootstrap input tagsinput

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.