【jQuery】tagEditorとAutocompleteの実装

目的：tagEditorとAutocompleteを両立したものを作りたいのですが、↓のリンク先のものを使ってくださいと言うことだったのですが、なかなか上手く行かず困っています。
tagEditorのリンク
 Autocompleteのリンク

行ったこと：
①
jquery-ui.theme.css
jquery.tag-editor.css
jquery-ui.css
jquery-ui.structure.css

bower.json
jquery.caret.min.js
jquery.tag-editor.min.js
jquery-3.2.1.min.js
jquery-ui.min.js
tag-editor.jquery.json

これらは入っていて、リンクされています！

②
jquery.tag-editor.js
jquery-ui.js
という新しいファイルを作りそこで、jquery.tag-editor.jsに↓の様に書きいたところちゃんと動きました。

$('#autocomplete').tagEditor({
    initialTags: ['Hello', 'World', 'Example', 'Tags'],
    delimiter: ', ', /* space and comma */
    placeholder: 'Enter tags ...'
});

jquery-ui.jsには↓の様に書き、こちらもちゃんと動きました。

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#autocomplete" ).autocomplete({
      source: availableTags
    });
    
  } );

しかし、jquery.tag-editor.jsに↓のように書くと、どっちも効果がなくなります。

$('#autocomplete').tagEditor({
    autocomplete: {
        delay: 0, // show suggestions immediately
        position: { collision: 'flip' }, // automatic menu position up/down
        source: ['ActionScript', 'AppleScript', 'Asp', ... 'Python', 'Ruby']
    },
    forceLowercase: false,
    placeholder: 'Programming languages ...'
});

試したこと：
forceLowercase: false,をはずすと、tagEditorの効果だけは表れます。

よろしくお願いします

m.ts10806

2017/07/28 06:52

「↓のリンク先のものを使ってくださいと言うことだったのですが」どちらで得たヒントですか？

tonari

2017/07/28 08:29

依頼されてる方からですね

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

回答1件

ベストアンサー

以下tagEditorの公式ドキュメントで、Autocompleteのデモがありますが、オートコンプリート機能で候補が出た上で、選択すると入力フィールドにタグ形式で格納されるようです。
tagEditor
以下デモのソースコードです。
demo.html

要素の#autocompleteに対して、autocompleteプラグインを適用した上でさらにtagEditorのautocomplete機能を適用というのは何かしら上書きや競合が起こっているかと思うので、使う際にはtagEditorのautocomplete機能だけ適用になるかと思います。

デモからautocomplete部分を抜き出したサンプルコードです

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.min.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/caret/1.0.0/jquery.caret.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.js"></script>
    <script>
        $(function(){
            $('#demo2').tagEditor({
                autocomplete: { delay: 0, position: { collision: 'flip' }, source: ['ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme'] },
                forceLowercase: false,
                placeholder: 'Programming languages ...'
            });

        });
    </script>

</head>
<body>
    <textarea id="demo2"></textarea>
</body>
</html>

投稿2017/07/28 07:57

編集2017/07/28 08:41