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
      , preselectedTags: ["item0", "item1", "item8", "item11"]
      , baseURL: './img/'
      , displayHierarchy: false
      , indentMultiplier: 2
      , fieldWidth: null
      });
    });
  </script>

Multi-Select with options

  <script>
    $(function(){
      $('#sel2').tagger({
        availableTags: peopleData
      , baseURL: './img/'
      , placeholder: 'Person'
      , caseSensitive: true
      , displayHierarchy: true
      , indentMultiplier: 2
      , tabindexOffset: 100
      , noSuggestText: 'No People Match'
      , fieldWidth: '20em'
      , suggestMaxWidth: '70em'
      , sortedOutput: true
      });
    });
  </script>

Single Select

  <script>
    $(function(){
      $('#sel3').tagger({
        availableTags: peopleData
      , baseURL: './img/'
      , placeholder: 'Email'
      , tabindexOffset: 200
      , suggestMaxHeight: '6em'
      , fieldWidth: null
      });
    });
  </script>

Single Select Mandatory

  <script>
    $(function(){
      $('#sel4').tagger({
        availableTags: peopleData
      , baseURL: './img/'
      , tabindexOffset: 300
      , mandatorySelection: true
      , fieldWidth: null
      });
    });
  </script>

Single Select Without JSON

  <script>
    $(function(){
      $('#sel5').tagger({
        baseURL: './img/'
      , tabindexOffset: 400
      , fieldWidth: null
      });
    });
  </script>

AJAX Autocomplete Multi-Select

  <script>
    $(function(){
      $('#ajaxselect').tagger({
        ajaxURL: 'ajaxhandler.php'
      , baseURL: './img/'
      , characterThreshold: 1
      , fieldWidth: null
      });
    });
  </script>

HTML Character Encoding (Embedded)

  <script>
    $(function(){
      $('#sel6').tagger({
        baseURL: './img/'
      , tabindexOffset: 500
      , fieldWidth: null
      });
    });
  </script>

HTML Character Encoding (JSON)

  <script>
    $(function(){
      $('#sel7').tagger({
        baseURL: './img/'
      , availableTags: charEncoding
      , tabindexOffset: 600
      , fieldWidth: null
      });
    });
  </script>

Tab Ordering (None Set)

Input 1

Tagger 1

Input 2

  <script>
    $(function(){
      $('#sel8').tagger({
        baseURL: './img/'
      , fieldWidth: null
      });
    });
  </script>

Programmatic Focus

  <script>
    $(function(){
      $('#sel9').tagger({
        availableTags: peopleData
      , baseURL: './img/'
      , suggestMaxHeight: '6em'
      , fieldWidth: null
      });
    });
  </script>

  <button onclick="document.getElementById('sel9').focus();" class="button">Focus</button>

Free Text Multi-Select

  <script>
    $(function(){
      $('#sel1').tagger({
        availableTags: peopleData
      , baseURL: './img/'
      , displayHierarchy: false
      , indentMultiplier: 2
      , fieldWidth: null
      , freeTextInput: true
      , freeTextMessage: 'Add <em>%VALUE%</em> to list'
      , freeTextPrefix: 'ft/'
      });
    });
  </script>