【HTML,jQuery】<input> の value が空ではないなら、リスト内からマッチするものを2つだけ抽出して、<datalist>に<option>として足したいです。

前提・実現したいこと

datalistタグを使用しているのですが、空ではない場合にマッチするものを2つだけリストとして表示したいのですが、そちらの処理の書き方がわからないです。。

配列からdatalistに全件表示しているソース

$.each(sugArray, function () {  
                    let item = document.createElement('option');
                    item.value = this.itemName;
                     item.text = this.code;
                    document.getElementById('suggest').appendChild(item);
                });

試したこと

以下の中の処理がわからないです。。

 $('input[name="sample"]').on('input', function () {
        const val = $(this).val();
        if(val !== ""){

      });

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

int32_t

2021/05/18 04:16

「マッチする」というのが itemName に対してなのか code に対してなのか、完全一致なのか前方一致なのか部分マッチなのか後方一致なのか、そのへんはどうでしょうか?

tanakamaro

2021/05/18 04:46

現状はitemNameに対して部分マッチを想定しております。

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

回答1件

ベストアンサー

js
1// マッチするものだけフィルターで残す
2sugArray.filter(item => item.itemName.indexOf(val) >= 0).
3    // 最初の2つだけ残す
4    slice(0, 2).
5    // 以下、質問文のコードと同等
6    forEach(item => {
7      document.getElementById('suggest').appendChild(
8          new Option(item.code, item.itemName));
9    });