MTAppjQuery P7

MTAppSuggest

テキスト入力欄にカンマ区切りの入力補完（サジェスト）を付与する。部分一致候補をクリック・Enter・上下キーで補完。タグ等の入力向け。

テキスト入力欄に、カンマ区切りの入力補完（サジェスト）機能を付与する jQuery プラグインです。入力中の語句に部分一致する候補を一覧表示し、クリック・Enter・上下キーで補完できます。タグやキーワードなど、決まった語彙から素早く入力させたい欄に向いています。

構文

$(selector).MTAppSuggest(options);

$.fn プラグイン（$(selector).MTAppSuggest(...)）です。対象要素（this）を返すのでチェーンできます。複数要素にまとめて適用できます。

パラメータ

options {Object} — 省略可。以下のプロパティを持ちます。

プロパティ	型	既定値	説明
`list`	Array	`[]`	候補になる語句（文字列）の配列

戻り値

{jQuery} — 対象要素（チェーン可能）。

保存される値

入力欄のテキストがそのまま保存されます。候補で補完すると末尾のカンマ区切り項目が置き換わり 値, が追記されるため、タグ的に 値, 値, の形式（カンマ＋空白区切り）になります。

使用例

基本

$('#customfield_tags').MTAppSuggest({ list: ['News', 'Blog', 'Topics', 'Release'] });

既存のタグ一覧を候補にする

const tags = ['お知らせ', 'イベント', 'キャンペーン'];
$('#customfield_keyword').MTAppSuggest({ list: tags });

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_tags').MTAppSuggest({ list: ['News', 'Blog', 'Topics', 'Release'] });
    }
})(jQuery);

生成される HTML

対象欄の直後に候補表示用のコンテナが挿入されます（初期状態は非表示）。

<input type="text" id="customfield_tags">
<div class="field-suggestion" id="suggestion-…" style="display:none;">
    <div class="field_completion" id="completion-…">
        <div class="complete-highlight">News</div>
        <div class="complete-none">Release</div>
    </div>
</div>

操作方法

入力: カンマ区切りの末尾の語句に部分一致する候補が表示されます。先頭の候補がハイライトされます。
↑ / ↓ キー: ハイライトする候補を移動します。
Enter: ハイライト中の候補で補完します（語句のあとに , が付きます）。
クリック: クリックした候補で補完します。
欄からフォーカスが外れると候補は閉じます。

補足

候補は対象欄の末尾のカンマ区切りセグメントに対して部分一致（大文字小文字を区別）で絞り込みます。
補完後は語句の後ろに , が付くため、続けて次の語句を入力できます（複数値の入力向け）。
候補の語句は要素のテキストとして挿入されるため、list に HTML が含まれても解釈されません（HTML インジェクションを起こしません）。

構文