<html lang="ja"translate="no">
<meta charset="utf-8">
<p>キーワード検索で画像 (パナ / 三菱 / 白 / ビー / 八 / 十 など)</p>
<input type="text"id="さーち"placeholder="入力">
<p id="結果"></p>
<script>
const えあこん一覧=[
{めーかー:"三菱重工",商品名:"ビーバー・エアコン",大きさ:"六畳用",画像:"hit_01.png"},
{めーかー:"ダイキン",商品名:"うるるとさらら",大きさ:"十畳用",画像:"hit_02.png"},
{めーかー:"東芝",商品名:"大清快",大きさ:"十二畳用",画像:"hit_03.png"},
{めーかー:"パナソニック",商品名:"エオリア",大きさ:"二十畳用",画像:"hit_04.png"},
{めーかー:"日立",商品名:"白くまくん",大きさ:"八畳用",画像:"hit_05.png"},
{めーかー:"三菱電機",商品名:"霧ヶ峰",大きさ:"十四畳用",画像:"hit_06.png"}
];
document.getElementById("さーち").addEventListener("input",function()
{const 文字列=this.value.trim();
const 表示=document.getElementById("結果");
if(文字列==="")
{表示.textContent="入力すると候補が出ます";
return;}
const ひっと=えあこん一覧.filter(ちょいす=>
ちょいす.めーかー.includes(文字列) ||
ちょいす.商品名.includes(文字列) ||
ちょいす.大きさ.includes(文字列));
if(ひっと.length===0)
{表示.textContent="該当なし";
return;}
表示.textContent="";
ひっと.forEach(ちょいす=>
{const 見せる=document.createElement("div");
見せる.style.cursor="pointer";
見せる.style.marginBottom="8px";
const 開く=document.createElement("span");
開く.textContent="▶︎ ";
開く.style.color="blue";
開く.style.fontWeight="bold";
const 書き込み=document.createElement("span");
書き込み.textContent=`${ちょいす.めーかー}の「${ちょいす.商品名}」(${ちょいす.大きさ}) はこれですか？`;
const 画像で=document.createElement("img");
画像で.src=ちょいす.画像;
画像で.style.width="200px";
画像で.style.height="100px";
画像で.style.display="none";
画像で.style.marginLeft="20px";
見せる.addEventListener("click",function()
{画像で.style.display=(画像で.style.display==="none" ? "block":"none");});
見せる.appendChild(開く);
見せる.appendChild(書き込み);
表示.appendChild(見せる);
表示.appendChild(画像で);});});
</script>
<hr>
<button onclick="りろーど()">リセット</button>
<script>function りろーど(){document.location.reload();}</script>
</body>
</html>