Basic

Include necessary JS/CSS files

Place these lines at the beginning of your page (between the <html> and where your actual page content starts):

<!-- CSS and JS for Team/User Selector Widget -->
<link rel="stylesheet" href="http://k.igem.org/common/EasyAutocomplete-1.3.3/easy-autocomplete-KAD-custom.css">
<script type="text/javascript" src="http://k.igem.org/js/TeamUserSelector.js"></script>

Basic Team Selector

<input id="TeamSelector1" type="text" size="50" placeholder="Loading...">

<script>
    $("#TeamSelector1").teamSelectWidget();
</script>

Set the input's size to a suitable number (of characters that will fit in the box). Set the placeholder to something that makes sense while team data is being retrieved. The widget code will make new placeholder text.

Basic User Selector

<input id="UserSelector1" type="text" size="50" placeholder="Loading...">

<script>
    $("#UserSelector1").userSelectWidget();
</script>

Again, set the input's size to a suitable number (of characters that will fit in the box). Set the placeholder to something that makes sense while team data is being retrieved. The widget code will make new placeholder text.

Getting data of the chosen team/user within the same page

By default, when the viewer chooses a team/user, data about the chosen team/user is made available by another jQuery function, getLastChosenItemData(). This function returns an Object containing team or user data, so you will have to look at its properties (such as name) to get the useful information out.

You chose:

<input id="TeamSelector2" type="text" size="50" placeholder="Loading..."> 
<button type="button" id="showTeamSelector2Data">Show Data</button> 
You chose: <input type="text" id="teamSelector2Display">

<script>
var ts2 = $("#TeamSelector2");
ts2.teamSelectWidget();

$("#showTeamSelector2Data").click(function() {

    $("#teamSelector2Display").val(ts2.getLastChosenItemData().name);

});
</script>

Going to a new page

If you want to send the viewer to a new page, you can set the option goToPage. Then when the viewer clicks an item, they will go to the new page, for example a team's wiki:

<input id="TeamSelector3" type="text" size="50" placeholder="Loading...">

<script>
    $("#TeamSelector3").teamSelectWidget( { goToPage: "wiki" } );
</script>

You can set goToPage to several values:

Value of `goToPage`	Destination
`"wiki"` (Teams Only)	Go to the team's wiki.
`"info_page"`, `"new_info_page"`, `"profile"`	Go to the new-in-2016 Team Info Page (working) or User Info Page (not working yet!).
`"old_info_page"`	Go to the old Team Info Page or User Info Page.
`"form"`, `"forms"`, `"kforms"`	Special case for a page in Kelly's form system (like the Safety Forms). This option will load the form belonging to the chosen team/user.
A partial URL, such as `"https://igem.org/Example?id="`	The Team ID Number or User ID Number will be appended to the partial URL, and the viewer's browser will go to the resulting complete URL.
Unspecified, left blank, `null`, `undefined`, `""` (empty string)	Stay on the same page.

Other options

The widgets provide a number of other options you can customize.

Option	Team Selector Default	User Selector Default	Description
`minCharNumber`	`1`	`3`	Minimum number of characters the viewer must type before the auto-complete dropdown will start working. For user selector, the widget will force `minCharNumber` to be ≥ 3. (This is to prevent someone easily pulling up a list of all iGEM users.)
`placeholder`	`"Start typing a team name..."`	`"Search iGEM Users"`	Placeholder text for the input box.
`goToPage`	`""`	`""`	Defaults to "", which means "stay on the same page". This option can be set to direct the viewer to other pages, as documented above.
`year`	`2015`	N/A	The year. (About when 2016 registration opens, I'll change this to default to 2016! --Kelly)
`showSupplementaryInfo`	`true`	`true`	Show extra information in the drop-down about teams (e.g. country, region, school) or users (e.g. full name, position category).
`onChooseEvent`			Not implemented yet. Custom callback for extra behaviors when an item is chosen from the dropdown.
`teamListVariable`	`null`	N/A	If you are Randy and building a CGI page, set this option to point to a variable containing a list of Team objects. This list must be in the same format as that returned by Dev/team_list.cgi.

<input id="TeamSelectWithOptions" type="text" size="50" placeholder="Loading...">

<script type="text/javascript">
$("#TeamSelectWithOptions").teamSelectWidget({

    minCharNumber: 4,
    placeholder: "This Team Selector has non-default options!",
    goToPage: "profile",
    year: 2009,
    showSupplementaryInfo: false

});
</script>

Advanced

Additional onChooseEvent behavior

Not implemented yet, sorry :(

Team Selector with Year dropdown

<input id="TeamSelectWithYear" type="text" size="50" placeholder="Loading...">

<select id="year_selector">
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
</select>

<script type="text/javascript">

$("#year_selector").change(function(event) {

    var selectedYear = parseInt($(this).val());   //Get the year
    $("#TeamSelectWithYear")
        .prop("disabled", true)   //Disable the field while we're working
        .destroySelectWidget()   //Destroy any existing select-widget on this input
        .teamSelectWidget( { year: selectedYear } )   //Set up new instance of team select widget
        .prop("disabled", false);   //Undisable the field because now we're done

}).trigger("change");   //Trigger "change" event once manually, so the team-selector will be loaded when the page loads
</script>

Using widgets in Randy/CGI world

For the Team Select Widget, you can set the option teamListVariable to point to an Array of Objects containing team data. This Array of Objects must have the same format as that returned by Dev/team_list.cgi. If you make a mistake and set teamListVariable to an undefined value, the widget will fall back and get data by AJAX.

The User Select Widget does not offer this option; it only gets data by AJAX.

<input id="TeamSelectWithVariable" type="text" size="50" placeholder="Loading...">

<script type="text/javascript">

var fakeTeamData = [

    {"country":"Scotland","region":"Europe","name":"Hogwarts",
        "section":"overgrad","pi_name":"Dumbledore","kind":"collegiate",
        "schools":"Hogwarts School of Witchcraft and Wizardry","id":"99991","title":"Bacteria Defeat Voldemort"},

    {"country":"France","region":"Europe","name":"Beauxbatons",
        "section":"overgrad","pi_name":"Madame Maxime","kind":"collegiate",
        "schools":"Beauxbatons Academy","id":"99992","title":"Magic Charms and Yeast"},

    {"country":"Rivendell","region":"Middle-Earth","name":"Rivendell",
        "section":"overgrad","pi_name":"Elrond","kind":"collegiate",
        "schools":"Rivendell Academy of Elvish Sciences","id":"99993","title":"One Plasmid to Rule them All"},

    {"country":"Gondor","region":"Middle-Earth","name":"Minas Tirith",
        "section":"overgrad","pi_name":"Lord Denethor","kind":"collegiate",
        "schools":"University of Gondor at Minas Tirith","id":"99994","title":"Bioremediation of Orcs"}
];

$("#TeamSelectWithVariable").teamSelectWidget( { teamListVariable: fakeTeamData } );
</script>

Dev/Team Selector Widget