プルダウンメニューにて、リスト項目それぞれにキーワードをいくつか登録しておいて、類似表示させたい

テキスト入力可能なプルダウンメニューなのですが、半角を打っても、全角の検索結果を表示したり、キーワードを設定しておいて？完全一致ではなく、（アーケードと入力しないとアーケードが出ないのではなく）表示させたいです。

しかし、
どのようにすれば実装可能かわかりません。

以下の画像のようなものです。

イメージとしましては、ｱｰｹｰﾄﾞと打って、アーケードが表示されるようなイメージです。

他にも、arcadeと打って、プルダウンメニューにアーケードが表示されるようにするには、
どのようにすればいいのでしょうか？
つまり、キーワードとして、[アーケード/ｱｰｹｰﾄﾞ/arcade/あーけーd...(以下好きなように登録)]
このように、いくつか裏で設定しておくイメージです。
そして、いずれかのキーワードが当たれば、アーケードが表示。

【アーケード/ｱｰｹｰﾄﾞ/arcade】のようにすればもちろん可能だとは思いますが・・・
<span style="display:none;">アーケード/arcade</span>
のように付加しておいて、隠せればいいのですが・・・
optionタグの中に入れても機能しないですし・・・

検索したのですが、見つからずで・・・
ご教授いただけると幸いです。

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<meta name="robots" content="noindex,nofollow">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8
9	<title>デモ</title>
10
11	<style>
12		html{
13			font-size:20px;
14		}
15		body{
16			margin:30px;
17		}
18		main{
19			background-color:#f8f8f8;
20			padding:20px;
21		}
22		h1{
23			color: #333;
24		}
25		h2{
26			color: #333;
27			font-size:22px;
28		}
29	
30		
31		select,input,textarea{
32			font-family : inherit;
33			font-size:20px;
34
35			
36			padding:3px;
37			border:1px solid black;
38			vertical-align:middle;
39		}
40		
41
42
43		
44	</style>
45</head>
46<body>
47
48
49
50<main>
51	<h1 style="color:black;">ＤＥＭＯ</h1>
52
53	<HR style="margin: 1em 0 ;">
54
55
56<div id="cardlayout-wrap">
57
58    <section>
59          
60            <h2 class="card-title" style="padding-top:10px;">データ</h2>
61            <input type="text" id="subtotal1" list="list" style="width:250px;">
62			
63			
64	</section>
65   
66    
67</div>
68
69
70
71</main>
72
73<script>
74		
75
76	var data1Json=[
77		{"list":"アーケード123","value":"1000","type":"3"},
78		{"list":"アーカイブ321","value":"2000","type":"3"},
79		{"list":"てすと","value":"3000","type":"3"},
80		{"list":"てすとhoge","value":"40000","type":"3"}
81	
82	];
83		Object.keys(data1Json).forEach(function(key){
84			var d=$('<datalist id="list">').append(data1Json.map(x=>$(`<option value="${x.list}"</option>`)));
85			$("input#subtotal1").append(d);      
86			
87
88			
89		});
90
91	
92</script>
93
94
95</body>
96</html>

行動規範の内容に同意します

回答2件

「サジェスト」「サジェスチョン」をキーワードに入れて探すと情報見つかると思います。
基本は入力のたびに検索し（ここはAjaxでも配列でも要件次第で）、検索結果でリストを作り、表示しています。

投稿2020/09/27 18:31

m.ts10806

総合スコア80875

Miii

2020/09/28 04:11 編集

いつもご回答くださり大変助かっております！ありがとうございます！サジェストというものがあるのですね！教えてくださりありがとうございます！サジェストを導入させていただいたところ、私の技量不足だと思いますが、思っているイメージとは少し違うと感じました。（具体的にどう違うと感じたのか後述します。）うまくいぢると、イメージのものになるのでしょうか？サジェストの場合、アーケードと入力すると、リスト？に登録していた単語の、アーケードｱｰｹｰﾄﾞ arcadeのように表示されると思うのですが、イメージとしては、ｱｰｹｰﾄﾞや、arcadeを入力しても、リスト自体にはアーケードだけが表示されるようにしたいです。（もちろん、そう表示したい場合は別です）また、リストにアーケード１、アーケード２、アーケード１２３とある場合は、もちろん通常のプルダウンのように表示されます。

m.ts10806

2020/09/28 04:22

何をインプットに何をアウトプットするかの仕様なので、そのように作ると決めるだけです。機能的には入力情報に対してヒットした情報を「候補」として出力するので「サジェスト」です。

Miii

2020/09/28 08:59

ご回答くださりありがとうございます！インプットとアウトプットを分けたらいいのですね！また、サジェストに当たるのですね！考え方も含めて教えてくださりありがとうございます！インプットとアウトプットを分けるのが、配列にいれたりして出力するのかと思うのですが、今の自分では相当時間がかかると思うので、段階をふんでいこうと思います。当面は、今の形をまずは完成させて、時間をかけて理解を深めて(技術、知識が足りないため)教えて頂いたことを取り入れれるようにしていきます！一人では到底完成できなかったので、本当に感謝しております。ありがとうございます！

m.ts10806

2020/09/28 09:41

もっと要件を細分化されたほうが良いかもしれません。それこそ道具、部品単位になるまで。

Miii

2020/09/29 06:21

いきなりつくり始めることが多いので、何が必要なのか書き出すようにしてみます！ありがとうございます！

m.ts10806

2020/09/29 06:35

設計が先です。 howよりwhy,whatが先です。

Miii

2020/09/29 08:16

howからしたことで、かなり遠回りしたことで、ひとつまた学べました。いきなりは無理でも少しずつでもwhy、whatを意識しようと思います。沢山課題がありそうです。教えていただき、ありがとうございます！

行動規範の内容に同意します

ベストアンサー

他の方が回答されていますが
ブラウザには「サジェスト」機能を再現する仕組みがあります。
ただ今回の質問のような
[アーケード/ｱｰｹｰﾄﾞ/arcade]
という複数種類には通常の状態ですと対応していません。
また一部のブラウザにも対応がしていません(IE11は未対応)

その為もし「サジェスト」の拡張機能を行いたいのであれば
自作するかまたはそのような機能があるものを別に用意して組み込む必要があります。
この辺りは「サジェスト」や「入力補完ライブラリ」だったり「jQuery サジェスト自作」で検索してみて下さい。
場合によっては「オートコンプリート」のほうが目的には近いかもしれません。
ただそれなりの労力は必要とします。

投稿2020/09/28 05:21

kuma_kuma_

総合スコア2506

Miii

2020/09/28 09:04

ご回答くださりありがとうございます！サジェストでは検索をかけて調べておりましたが、「入力補完ライブラリ」や、「jQuery サジェスト自作」ではまだ検索をかけていなかったので検索してみます！知識、技術が圧倒的に足りないので、今回は今の形を完成させようと思います。学習をすすめて段階的に、取り入れていきたいと思っております。先がまったくみえなかったのですが、おかげさまでひとつの形になりそうです！何度もアドバイスをくださり本当にありがとうございます！

行動規範の内容に同意します

あなたの回答