intra-mart Accel Platform IM-共通マスタ検索画面仕様書第9版 2021-04-01

目次 ≪ 7. IM-共通マスタ検索（オートコンプリート型） 7.2. 実装 ≫

7.1. 構成¶

IM-共通マスタ検索（オートコンプリート型）は、起動引数で指定されたHTMLエレメント内に、ユーザや会社組織を検索する機能を持つコンポーネントを構築します。

【図：IM-共通マスタ検索（オートコンプリート型）】
実装例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div id="autocomplete_user_search" style="padding: 1rem;"></div>
<link rel="stylesheet" type="text/css" href="./im_master/search_dialog/common_search.css" />
<script type="text/javascript" src="im_master/search_dialog/autocompletes_user.bundle.js"></script>
<script type="text/javascript">
  (function () {
    const params = {
      parent: "#autocomplete_user_search",
      params: {
        templateId: "imm_t_user"
      }
    };
    new ImMaster.AutocompletesUserSearch(params);
  })();
</script>
コンポーネントの構成は以下のとおりです。

7.1.1. 検索キーワード入力テキストボックス¶

【図：コンポーネント構成　検索キーワード入力テキストボックス】

検索キーワードを入力するフィールドです。

カーソルを当てることで、キーワード入力ができます。

7.1.2. 検索候補リスト¶

【図：コンポーネント構成　検索候補リスト】

検索候補が表示されるフィールドです。

検索キーワードを入力すると表示されます。

候補を選択または検索キーワード入力テキストボックスからフォーカスが外れると非表示に戻ります。

リストに一度に表示される件数は30件です。それ以上の候補はスクロールすると表示されます。

コラム

ユーザ（所属組織）検索等では、ユーザが複数部署に所属していると複数行表示されます。

7.1.3. 選択データ表示チップ¶

【図：コンポーネント構成　選択データ表示チップ】

選択されたデータが表示されるフィールドです。

×アイコンをクリックするとチップは削除されます。

目次 ≪ 7. IM-共通マスタ検索（オートコンプリート型） 7.2. 実装 ≫