<html lang="ja"translate="no">
<meta charset="utf-8">
<p>キーワード検索で画像 + 注文 (パナ / 三菱 / 白 / ビー / 八 / 十 など) + 注文フォーム</p>
<input type="text"id="さーち"placeholder="入力">
<p id="結果"></p>
<button id="注文ボタン">注文</button>
<div id="注文フォーム"style="display:none;margin-top:20px;border:1px solid #456789;padding:10px;">
<h3>注文フォーム</h3>
商品名：<input type="text"id="form_商品名"style="width:500px;"readonly><br><br>
お名前：<input type="text"id="form_名前"style="width:500px;"><br><br>
住所：<input type="text"id="form_住所"style="width:520px;"><br><br>
お届け日：<input type="date"id="form_日付"style="width:500px;"><br><br>
注文番号：<input type="text"id="form_番号"style="width:500px;"readonly><br><br>
<button id="確定">確定</button>
</div>
<p id="注文結果"style="color:green;margin-top:10px;"></p>
<script>
const えあこん一覧=[
{めーかー:"三菱重工",商品名:"ビーバー・エアコン",大きさ:"六畳用",画像:"hit_01.png"},
{めーかー:"ダイキン",商品名:"うるるとさらら",大きさ:"十畳用",画像:"hit_02.png"},
{めーかー:"東芝",商品名:"大清快",大きさ:"十二畳用",画像:"hit_03.png"},
{めーかー:"パナソニック",商品名:"エオリア",大きさ:"二十畳用",画像:"hit_04.png"},
{めーかー:"日立",商品名:"白くまくん",大きさ:"八畳用",画像:"hit_05.png"},
{めーかー:"三菱電機",商品名:"霧ヶ峰",大きさ:"十四畳用",画像:"hit_06.png"}
];
let 選択中商品=null;
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");
選択中商品=ちょいす;
document.getElementById("form_商品名").value=`${ちょいす.めーかー}「${ちょいす.商品名}」(${ちょいす.大きさ})`;
document.getElementById("form_番号").value='ORD'+Date.now();});
見せる.appendChild(開く);
見せる.appendChild(書き込み);
表示.appendChild(見せる);
表示.appendChild(画像で);});});
document.getElementById("注文ボタン").addEventListener("click",function()
{if(!選択中商品)
{alert("まず写真で商品を選んでください");
return;}
document.getElementById("注文フォーム").style.display="block";});
document.getElementById("確定").addEventListener("click",function()
{const 名前=document.getElementById("form_名前").value.trim();
const 住所=document.getElementById("form_住所").value.trim();
const 日付=document.getElementById("form_日付").value.trim();
const 番号=document.getElementById("form_番号").value;
if(!名前 || !住所 || !日付)
{alert("名前・住所・お届け日を入力してください");
return;}
document.getElementById("注文結果").textContent=`注文確定！\n${選択中商品.めーかー}「${選択中商品.商品名}」(${選択中商品.大きさ})\n` +`お名前：${名前}\n住所：${住所}\nお届け日：${日付}\n注文番号：${番号}`;});
</script>
<hr>
<button onclick="りろーど()">リセット</button>
<script>function りろーど(){document.location.reload();}</script>
</body>
</html>