Simply one more jQuery based competition sections which enables you to make, sort out and oversee single and twofold disposal competitions.

Highlights:
  • Backings both single and twofold end competitions.
  • AJAX empowered.
  • Autocomplete.
  • Completely adjustable information structure.
  • Simple to include/expel/alter matches.



 Essential utilization:
1. Load the required records from dist organizer. Ensure the JavaScript record jquery.bracket.min.js is stacked after jQuery library 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.bracket.min.js"></script>

<link href="dist/jquery.bracket.min.css" rel="stylesheet">


2. You have to make a compartment component to put the competition section 
<div class="demo">
</div>


 3. The information structure to create a solitary disposal competition. 
var singleElimination = {
  "teams": [              // Matchups
    ["Team 1", "Team 2"], // First match
    ["Team 3", "Team 4"]  // Second match
  ],
  "results": [            // List of brackets (single elimination, so only one bracket)
    [                     // List of rounds in bracket
      [                   // First round in this bracket
        [1, 2],           // Team 1 vs Team 2
        [3, 4]            // Team 3 vs Team 4
      ],
      [                   // Second (final) round in single elimination bracket
        [5, 6],           // Match for first place
        [7, 8]            // Match for 3rd place
      ]
    ]
  ]
}


4. The information structure to create a twofold disposal competition. 
var doubleElimination = {
  "teams": [
    ["Team 1", "Team 2"],
    ["Team 3", "Team 4"]
  ],
  "results": [            // List of brackets (three since this is double elimination)
    [                     // Winner bracket
      [[1, 2], [3, 4]],   // First round and results
      [[5, 6]]            // Second round
    ],
    [                     // Loser bracket
      [[7, 8]],           // First round
      [[9, 10]]           // Second round
    ],
    [                     // Final "bracket"
      [                   // First round
        [11, 12],         // Match to determine 1st and 2nd
        [13, 14]          // Match to determine 3rd and 4th
      ],
      [                   // Second round
        [15, 16]          // LB winner won first round (11-12) so need a final decisive round
      ]
    ]
  ]
}


5. Draw an essential competition section inside the compartment you just made. 
$('.demo').bracket({
  init: singleElimination
});


 6. A few alternatives to tweak the competition section. 
$('.demo').bracket({
  init: null, // data to initialize
  save: null, // called whenever bracket is modified
  userData: null, // custom user data
  onMatchClick: null, // callback
  onMatchHover: null, // callback
  decorator: null, // a function
  skipSecondaryFinal: false,
  skipGrandFinalComeback: false,
  skipConsolationRound: false,
  dir: 'rl', // "rl" or  "lr",
  disableToolbar: false,
  disableTeamEdit: false,
  teamWidth: '', // number
  scoreWidth: '', // number
  roundMargin: '', // number
  matchMargin: '', // number
});


Change log:
     v0.11.1 (2018-01-25)
  • Fix TBD spread and last connector bug.
     v0.11.0 (2017-10-16)
  • Center connectors with centerConnectors: boolean and incapacitate float feature with disableHighlight: boolean.
  • Bug fixes.
  • Update conditions
     v0.10.1 (2016-11-06)
  • Pass section state to render decorator to permit custom perception for TBD, BYE, no-score, and default win situations.
     v0.9.0 (2016-10-26)
  • Adjust section extents with teamWidth: number, scoreWidth: number, matchMargin: number, roundMargin: number.
  • disableTeamEdit: boolean anticipates changing the group when in alter mode.
  • disableToolbar: boolean avoids adjusting the section size and configuration in alter mode.
   2016-10-17
     v0.8.0
  • Gives legitimate help for having any number of groups in a competition (rather than only 2^N, i.e. 2, 4, 8...).
  • Leaving groups purge (invalid) makes a BYE branch. Any group booked against BYE will get a default win with no score, and progress consequently to the following match.
This marvelous jQuery module is created by teijo. For further developed Usages, please check the demo page or visit the official site.