JSFiddle - React, Tailwind, and code Playground

by maxisam

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.2/select2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
<script src="http://ivaynberg.github.com/select2/select2-3.2/select2.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>

<div ng-controller="MainCtrl">
  <h2>Single</h2>
  <pre>Selected: {{selectedSingle|json}}</pre>
  <select ui-select2 ng-model="selectedSingle" data-placeholder="-- Select One --">
    <option></option>
    <option ng-repeat="item in items" value="{{item.id}}">{{item.text}}</option>
  </select>
  <h2>Multiple</h2>
  <pre>Selected: {{selectedMulti|json}}</pre>
  <input style="width: 100px" ui-select2="multiOptions" ng-model="selectedMulti" />
</div>

JavaScript

var response = [
    {
    "id": 1,
    "text": "First",
    "color": "Mauve"},
{
    "id": 2,
    "text": "Second",
    "color": "red"},
{
    "id": 3,
    "text": "Third",
    "color": "orange"},
{
    "id": 4,
    "text": "Fourth",
    "color": "red"},
{
    "id": 5,
    "text": "Fifth",
    "color": "pink"},
{
    "id": 6,
    "text": "Sixth",
    "color": "yellow"},
{
    "id": 7,
    "text": "Seventh",
    "color": "blue"},
{
    "id": 8,
    "text": "Eighth",
    "color": "blue"},
{
    "id": 9,
    "text": "Ninth",
    "color": "purple"},
{
    "id": 10,
    "text": "Tenth",
    "color": "green"}
];

var app = angular.module('app', ['ui']);

app.controller('MainCtrl', function($scope, $http) {
   // $http.get('data.json').success(function(response) {
   //     $scope.items = response;
   // });
    $scope.items = response;

    $scope.multiOptions = {
        minimumInputLength: 1,
        ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
            url: "data.json",
            data: function(term, page) {
                return {};
            },
            results: function(data, page) { // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter remote JSON data
                return {
                    results: data
                };
            }
        }
    };
});