Selectize.jsを使って、セレクトボックスを実装しているのですが、うまく機能しません。
プラグインはCDNから読み込み、Selectize.jsの公式ページにあるDEMOやhttp://4webtbt.com/001490を参考に実装したのですが、正しく機能させることができず、原因も特定できませんでした。開発者ツールのコンソールを見ても、とくにエラーは出ていませんでした。

セレクトボックス自体は表示されるのですが、入力ができず、初期に入れている文字が削除できない状態です。
手探りで原因をつかもうとしたものの、全く見当つかずなため、ご教授いただければと思います。

Selectize.js公式ページ

https://selectize.github.io/selectize.js/

実装したコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Test Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css" />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microplugin/0.0.3/microplugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/selectize.min.js"></script>
  <script type="text/javascript">
    $('#selectizeDemo01').selectize({
      persist: false,
      createOnBlur: true,
      create: true
    });
  </script>
</head>
<body>
  <div class="selectize-box">
    <p class="title">タグ</p>
    <div class="control-group">
      <input type="text" id="selectizeDemo01" class="demo-default selectized" value="awesome,neat" tabindex="-1" style="display: none;">
      <div class="selectize-control demo-default multi">
        <div class="selectize-input items not-full has-options has-items">
          <div data-value="awesome" class="item">awesome</div>
          <div data-value="neat" class="item">neat</div>
          <input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 1; position: relative; left: 0px;">
        </div>
        <div class="selectize-dropdown demo-default multi" style="display: none;">
          <div class="selectize-dropdown-content"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

表示されるもの

行動規範の内容に同意します

回答2件

自己解決

無駄そうな部分を削ぎ落としてソースを見直し、sifter.jsを追加することで自己解決しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Test Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css" />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microplugin/0.0.3/microplugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sifter/0.5.3/sifter.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/selectize.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $('#selectizeDemo01').selectize({
        persist: false,
        createOnBlur: true,
        create: true
      });
    });
  </script>
</head>
<body>
<div class="selectize-box">
  <p class="title">タグ</p>
  <div class="control-group">
    <input type="text" id="selectizeDemo01" class="demo-default selectized" value="awesome,neat" tabindex="-1" style="display: none;">
  </div>
</div>
</body>
</html>

投稿2019/03/27 07:57

Uichi

総合スコア11