JSFiddle - React, Tailwind, and code Playground

by Leko Inoue

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://rawgit.com/cloudfour/hideShowPassword/master/hideShowPassword.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
<div class="container">
     <h1>Demos</h1>

    <p>Reference: <a href="http://leko.jp/archives/807">フォーム周りで地味に使うUIと実現方法</a>

    </p>
     <h2>パスワードの表示/非表示を切り替える</h2>

    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-3">
                <label for="form-username" class="control-label">Email or Username</label>
            </div>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="form-username">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-3">
                <label for="form-password" class="control-label">Password</label>
            </div>
            <div class="col-sm-9">
                <input type="password" class="form-control" id="form-password">
            </div>
        </div>
    </form>
    <hr>
     <h2>クリックしたら全選択</h2>

    <p>URL:
        <input type="url" class="form-control focus-then-select" readonly value="ssh://hoge.git">
    </p>
    <hr>
     <h2>タグっぽいものを入力する</h2>

    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-3">
                <label for="form-tags" class="control-label">Tags</label>
            </div>
            <div class="col-sm-9">
                <input type="text" class="form-control input-tags" id="form-tags" value="default,デフォルト">
            </div>
        </div>
    </form>
    <hr>
     <h2>インクリメンタルサーチする</h2>

   ...

SCSS

// アウトラインが出ないよう上書き
.btn-show-hide-password {
    outline: none !important;
}

// タグのスタイルをカスタマイズしてみる
.input-tags.selectize-control.multi .selectize-input > div {
    background: #555;
    border: 1px solid #333;
    color: #eee;
}

// インクリメンタルサーチの候補に任意のスタイルをあてられる
.qiita-post {
    img.user-icon {
        width: 100%;
    }
    .description {
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
}

Babel + JSX

// パスワードの表示/非表示を切り替える
// @see https://github.com/cloudfour/hideShowPassword#usage
jQuery('#form-password').showPassword('focus', {
    show: false,
    toggle: {
        className: 'btn btn-link btn-show-hide-password'
    }
});

// クリックしたら全選択
// http://stackoverflow.com/questions/13887430/select-all-text-in-an-input-when-it-gains-focus
jQuery.fn.focusThenSelect = function () {
    this.on('focus', function () {
        this.select();
    });
};
$('.focus-then-select').focusThenSelect();

// タグっぽいものを入力する
// http://brianreavis.github.io/selectize.js/
$('.input-tags').selectize({
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

// インクリメンタルサーチする
// http://brianreavis.github.io/selectize.js/
// https://github.com/brianreavis/selectize.js/blob/master/docs/events.md
var ret = $('#form-qiita-posts').selectize({
  valueField: 'url',
  labelField: 'title',
  searchField: 'title',
  options: [],
  create: false,
  render: {
    option: function(item, escape) {
      var tags = [];
      for (var i = 0, n = item.tags.length; i < n; i++) {
        tags.push('<span>' + escape(item.tags[i].name) + '</span>');
      }

      return `<div class="qiita-post row">
        <div class="col-xs-2">
          <img class="user-icon" src="${escape(item.user.profile_image_url)}" alt="${escape(item.user.name)}">
        </div>
        <div class="col-xs-10">
          <strong class="title">${escape(item.title)}</strong>
          <p class="description">${escape(item.body.substr(0, 100))}</p>
          <small class="tags">Tags:${(tags.length ? tags.join(', ') : '-')}</small>
        </div>
      </div>`;
    }
  },
  load: function(query, done) {
    if (!query.length) return done();
    $.ajax({
      url: '//qiita.com/api/v2/items',
      type: 'GET',
      dataType: 'json',
      data: {
        page: 1,
        per_page: 100,
        query: query
      },
      error: function()...