TextBox 4 — テキストボックス オートコンプリート

/* === オートコンプリート サンプル ===
   :root の変数を書き換えると色を一括変更できます */
:root {
  --color-accent: #2B7FE8;
  --color-text:   #1A2332;
  --color-border: #D0D7E0;
  --color-bg:     #F4F6F9;
}
* { box-sizing: border-box; }
body { font-family: sans-serif; color: var(--color-text); padding: 24px; max-width: 480px; }

/* ラベル */
.tb4-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #5A6A7A;
}

/* 入力欄ラッパー（ドロップダウンの絶対配置基点） */
.tb4-input-wrap { position: relative; }

/* テキスト入力欄 */
.tb4-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tb4-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

/* 候補ドロップダウン */
.tb4-dropdown {
  display: none; /* JSで表示切り替え */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* 候補アイテム */
.tb4-dropdown-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.1s;
}
.tb4-dropdown-item:hover { background: var(--color-bg); }

/* キーボードナビ時のハイライト */
.tb4-dropdown-item.active {
  background: var(--color-accent);
  color: #fff;
}

/* 選択結果表示エリア */
.tb4-result { margin-top: 14px; font-size: 14px; }
.tb4-result.has-value {
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}

/* スマホ対応 */
@media (max-width: 480px) {
  body { padding: 16px; }
}

var cityData    = [];
var activeIndex = -1;

var input    = document.getElementById('tb4-input');
var dropdown = document.getElementById('tb4-dropdown');
var result   = document.getElementById('tb4-result');

// ページ読み込み時にJSONを1回だけ取得する
// ※ fetch() は file:// では動作しないため、簡易サーバーで開いてください
(function () {
  fetch('./data/data.json')
    .then(function (res) { return res.json(); })
    .then(function (data) { cityData = data; })
    .catch(function (err) {
      console.error('data.json の読み込みに失敗しました。data/ フォルダを確認してください。', err);
    });
})();

// 入力のたびに候補を絞り込んで表示する
input.addEventListener('input', function () {
  var query = input.value;
  if (!query) { closeDropdown(); return; }

  var matches = cityData.filter(function (name) {
    return name.indexOf(query) !== -1;
  });
  if (matches.length === 0) { closeDropdown(); return; }

  renderDropdown(matches);
});

// キーボードナビゲーション
input.addEventListener('keydown', function (e) {
  var items = dropdown.querySelectorAll('.tb4-dropdown-item');
  if (!items.length) return;

  if (e.key === 'ArrowDown') {
    e.preventDefault();
    if (activeIndex < items.length - 1) activeIndex++;
    updateActive(items);
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    if (activeIndex > 0) activeIndex--;
    updateActive(items);
  } else if (e.key === 'Enter') {
    e.preventDefault();
    if (activeIndex >= 0 && items[activeIndex]) {
      selectCity(items[activeIndex].textContent);
    }
  } else if (e.key === 'Escape') {
    closeDropdown();
  }
});

// 候補リストを描画する
function renderDropdown(matches) {
  dropdown.innerHTML = '';
  activeIndex = -1;
  for (var i = 0; i < matches.length; i++) {
    var li = document.createElement('li');
    li.className = 'tb4-dropdown-item';
    li.setAttribute('role', 'option');
    li.textContent = matches[i]; // textContent でXSS対策
    (function (name) {
      // mousedown: blur より先に発火するため click より確実に選択できる
      li.addEventListener('mousedown', function (e) {
        e.preventDefault(); // フォーカスを保持したまま選択確定
        selectCity(name);
      });
    })(matches[i]);
    dropdown.appendChild(li);
  }
  dropdown.style.display = 'block';
}

// ハイライト中の候補を更新する
function updateActive(items) {
  for (var i = 0; i < items.length; i++) {
    items[i].classList.remove('active');
  }
  if (activeIndex >= 0) {
    items[activeIndex].classList.add('active');
    items[activeIndex].scrollIntoView({ block: 'nearest' });
  }
}

// 候補を確定して入力欄にセットする
function selectCity(name) {
  input.value = name;
  closeDropdown();
  result.textContent = '選択した市区町村: ' + name;
  result.className = 'tb4-result has-value';
}

// ドロップダウンを閉じる
function closeDropdown() {
  dropdown.style.display = 'none';
  dropdown.innerHTML = '';
  activeIndex = -1;
}

// 入力欄以外をクリックしたら閉じる
document.addEventListener('click', function (e) {
  if (!e.target.closest('.tb4-autocomplete')) {
    closeDropdown();
  }
});

data フォルダを作成し、data.json として保存してください。

[
  "千代田区", "中央区", "港区", "新宿区", "文京区",
  "台東区", "墨田区", "江東区", "品川区", "目黒区",
  "大田区", "世田谷区", "渋谷区", "中野区", "杉並区",
  "豊島区", "北区", "荒川区", "板橋区", "練馬区",
  "足立区", "葛飾区", "江戸川区",
  "八王子市", "立川市", "武蔵野市", "三鷹市", "青梅市",
  "府中市", "昭島市", "調布市", "町田市", "小金井市",
  "小平市", "日野市", "東村山市", "国分寺市", "国立市",
  "福生市", "狛江市", "東大和市", "清瀬市", "東久留米市",
  "武蔵村山市", "多摩市", "稲城市", "羽村市", "あきる野市",
  "西東京市",
  "瑞穂町", "日の出町", "奥多摩町",
  "大島町", "利島村", "新島村", "神津島村",
  "三宅村", "御蔵島村", "八丈町", "青ヶ島村", "小笠原村"
]