Tagger Widget Examples

Below are some examples of the tagger widget applied to a few select elements with varying options passed in. peopleData comes from the data.json file included for this demo.

Generic Multi-Select 
  <script>
    $(function(){
      $('#sel1').tagger({
        availableTags: peopleData
      , baseURL: '..'
      });
    });
  </script>
Multi-Select with options 
  <script>
    $(function(){
      $('#sel2').tagger({
        availableTags: peopleData
      , baseURL: '..'
      , placeholder: 'Person'
      , caseSensitive: true
      , displayHierarchy: true
      , indentMultiplier: 2
      , tabindexOffset: 100
      , noSuggestText: 'No People Match'
      , fieldWidth: '40em'
      , suggestMaxWidth: '70em'
      });
    });
  </script>
Single Select 
  <script>
    $(function(){
      $('#sel3').tagger({
        availableTags: peopleData
      , baseURL: '..'
      , placeholder: 'Email'
      , tabindexOffset: 200
      , suggestMaxHeight: '6em'
      });
    });
  </script>