ページ読み込み時に可変となる文字列を検知してsourceイベントを発火させる方法【jQuery UI Autocomplete】

やりたいこと

jQuery UI Autocomplete を使って、ページ読み込み時にsourceイベントを発火させます。
もう少しユーザー操作に噛み砕くと、

1. ページ読み込み時に、"東京" または "北海道" をinputにセット
2. inputにセットした文字列から、オートコンプリートを表示

"北海道の場合"は

• 北海道 観光
• 北海道 エリア
• 北海道 グルメ

を表示

Autocompleteの概要

ドキュメント

js.studio-kingdom.com

概要

属性.autocomplete関数の中で処理を書いていきます。 

$('#input').autocomplete({
  source: '候補のデータ',
  autoFocus: true,
  delay: 100,
  minLength: 1
});

• source : 候補のデータ
• autoFocus : リスト先頭にフォーカスするか
• delay : 入力から表示までの遅延（ミリ秒）
• minLength : イベントが発火する最初の文字数

実装例

$(() => {
    const paramFirst = commonParam();
    $('#input').val(decodeURIComponent(paramFirst));

    const keyDownEvent = new KeyboardEvent( "keydown", { keyCode: 40 });
    document.getElementById("input").dispatchEvent(keyDownEvent);

    $("#input").autocomplete({
        source: '表示するデータ（ここで通信処理を書く）'
    });
})
const commonParam = () => {
    let paramList = {}
    const originParam = location.search
        .substring(1)
        .split('&')
        
    for(let i = 0;originParam[i];i++) {
        paramSplit = originParam[i].split('=')
        paramList[paramSplit[0]] = paramSplit[1]
    }
    return paramList["area"];
}

1. リクエストパラメータから値を取得してテキストボックスに反映
2. KeyboardEvent を使って、keyDownEvent(code 40)を実行
3. autocomplete処理が呼ばれて、オートコンプリートが表示