【js】tagEditorの削除方法

laravel5.4を使用して検索機能を作成しています。
tagEditorとAutocompleteは下記の参考リンクのものを使用しています。

参考リンク：tagEditorの参考リンク、Autocompleteの参考リンク

目的：先日質問投稿させていただいたtagEditorとAutocompleteのサジェスト機能についての質問なのですが,
サジェストされたもの以外の場合その文字を削除したいというのが今回の目的です。

今の段階ですと、tagEditorとAutocompleteは上手く動いていますが、autocompleteのsourceに無いものもタグ化されてしまう状態です。

例えば：autocompleteにsource:['ActionScript'、'AppleScript'、'Asp']と入っていたとして、textに「a」と打ち、autocompleteで出てくるActionScript'、'AppleScript'、'Asp'を選ばないと、そのまま a がタグ化すると言う状態なのです。

私は今回autocompleteに無い値(完全一致)かautocompleteで出てくるものを選んでない場合はその入力された値をタグ化する前もしくは、タグ化してすぐに削除して、その値で検索できないようにしたいと考えています。

View--

{!! Form::text('aaa', old('aaa'), ['class' => 'test_text','id' => 'test']) !!}

<script>
$( function() {
        $('#test').tagEditor({
            autocomplete: { 
            	delay: 0, 
            	position: { collision: 'flip' }, 
            	source: {!! $autocomplete !!}
            },
            maxTags: 1,
            forceLowercase: false
        });
    });
</script>

$autocompleteはDBにあるデータを参照しています。Controllerで下記の様に書きviewに渡しています。べた書きしていた['ActionScript'、'AppleScript'、'Asp']がDBに入っていてソレを取り出している感じです

Controller--

$autocomplete = JSON_ENCODE(DB::table('tester')->select('name')->distinct()->pluck('name')->toArray());

Jsで入力した際に条件と違ったものが入ればそれを削除するようなものはございますか？
もしくは、tagEditorかAutocompleteの設定で何かあるでしょうか(removeで試していますがなかなか上手く行きません)？

よろしくお願いします。

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

回答2件

ライブラリのソースコードをみるとそんなに長いものではないので、ミニファイされていないものを読み込んでから、console.logかJavascriptのデバッガーで挙動を検証してみては如何でしょうか
Github jquery.tag-editor.js
Github autocomplete.js

JqueryUIは以下でダウンロードしたとすると、jquery-ui.jsに各ライブラリが結合された状態になっていたので、jQuery UI Autocompleteでコード検索すると該当のライブラリの記述場所にいけるかと思います。
https://jqueryui.com/download/

基本的に2つを組み合わせて使う前提でないものは、双方のライブラリで想定していない箇所で問題が起こることも多いのでコードの中身をみてパッチ的に処理順番を調整したりコードに手を加えるか、別のライブラリを探す、あるいはサービスとして必須の機能でない場合は、ひとまず単純なフォームのUIで実装をしておいていずれ置き換えるといった方法を取るほうが仕事が早いと思います。

投稿2017/08/11 01:04