テキストボックスに入力履歴（ドロップダウンリスト）をつけたかったのよ

背景

以下の続きなんですわ。

1.5日かけてGASの課題CSVをユニパの出席CSVに変換するツールをつくったったん - memorandums

授業コードが普通のテキストボックスですよね。。。

この時点のコードでは、とりあえず授業コードが空だとまずいので空チェックはするようにしていました。

ただ、科目はたくさんあるのですべてのコードをドロップダウンリストに入れても選択するのは大変です。

そもそも、先生方は別システム（ユニパ）からコピペするはずですし、万が一、間違ってもユニパへの登録では蹴られるので問題ないか。。。と思っていました。

それでも、毎度、コピペするのも面倒ですしね。。。ということで、入力した授業コードの履歴を保存しておいてドロップダウンリストから選択できたらいいな。。。と思っていました。

で、昼くらいからごにょごにょと作り始めました。

最終的にできたコードの一部が以下です。

bootstrapを使っているのですが、簡単に実装できた、という例がなく、結局、自分で作りました。

プロの方からすると。。。なにやってんだか。。。という感じでしょうね。

本題

テキストボックスの入力の履歴をドロップダウンリストから選択できるようにしたい、を実現するコードの例です。

授業コードのテキストボックスのidがclass_idsであるとします。

window.onloadでloadClassIds()を実行します。ファイルを変換するときにupdateClassIds()を実行します。それだけです。とりあえず１０件を上限としてdata-listに追加するようにしました。最近の入力がドロップダウンリストの最初に出るようにしています。

それにしてもlocalStorageは便利ですね。。。でも、使うなという意見もあるようです。IDやパスワードだとアウトな感じがしますが、まぁ、授業コードならいいでしょう。

■HTML

        <div class="form-group">
            <label for="class_id">授業コード：</label>
            <input type="text" pattern="[0-9A-Z]{10}" id="class_id" class="form-control" autocomplete="off" list="class_ids" required>
            <datalist id="class_ids"></datalist>
        </div>

■JS

    function loadClassIds(){
        let class_ids = JSON.parse(localStorage.getItem('class_ids'))
        if (class_ids) {
            let class_ids_tag = document.getElementById('class_ids')
            for (let c of class_ids) {
                let o = document.createElement('option')
                o.value = c
                class_ids_tag.appendChild(o)
            }
        }
    }
    
    function updateClassIds(){
        let class_ids = JSON.parse(localStorage.getItem('class_ids')) || new Array()
        class_ids.unshift(class_id.value)
        if (class_ids.length > 10) {
            class_ids.splice(9,1)
        }
        localStorage.setItem('class_ids', JSON.stringify(class_ids));
    }