JavaScriptでのComboBox のようなもの

Question

avaScriptに挑戦しています。

HTMLに ComboBox ( テキストボックス + リストボックス ) に当たるものがないので、

datalistタグというものでやっています。

( HTML といっても HTML5 です。 )

               <form name="Asking">
                       <label id="TextBoxForKeyword">
                              キーワード:<input type="text" name="KeyWordEdit" list="KeywordsList">
                       </label>
                       <datalist id="KeywordsList">
                                 <option value="選択肢A"></option>
                                 <option value="選択肢B"></option>
                                 <option value="選択肢C"></option>
                                 <option value="選択肢D"></option>
                                 <option value="選択肢E"></option>
                       </datalist>
               </form>

という風にして、

テキストボックスにキーワードを入れて 検索かけたりする場合で、

datalistにないキーワードの場合は alert で "キーワードが間違っている" といったメッセージを表示するとします。

メッセージ表示はいいですが、

datalistにないキーワード ... っていうのがわからないのです。

C/C++ & WinAPI や ExcelVBA, Java 等の場合は ComboBox ( 名称が違ったりするが。 ) のインデックスが -1 のときは、

「リストにないデータ」なので、やりやすいですが、HTML+JavaScriptの場合、それができないようなので、どうすればいいか...

上記コードの場合は、

選択A ～ 選択E までのデータなら OK で、選択F等のようにリストにないものは alert等で警告する

のようにしたいのです。

ラジオボタンのように 「指定フォーム内の指定nameの個数分ループし、チェックがあるのをtrueとする」のような感じなのかと思い、

上記コードのoptionタグ内に name="key" を埋め込み、

/*
   リスト(候補)に指定キーワードがあるかどうか調べる。
   あれば true, なければ false を返す。
   
   keyword := この関数を呼び出す前に取得したデータ ( キーワード ) とする
*/
function HasKey( keyword ){
         var flag;
         
         flag = false;
         
         for( i = 0; i < document.Asking.key.length; i++ ){
               if( document.Asking.key[i].value == keyword ){
                    flag = true;
                    break;
               }
         }
return flag;
}

としました。

で、戻り値を受け取った側 ( 呼び出し側 ) は true/false をalert で 表示する
のですが、なぜか何も出てきません。

プログラム ( JavaScript )から 配列で 指定する方法もありますが、

外部jsファイルに記述するので、

できれば変更は HTMLだけに済ませたいのですが。

[環境等]
HTML: HTML5
言語: JavaScript

宜しくお願い致します。

---

文章を追加します。

私がやりたかったことは、

HTML5 で Combobox ( datalist を使ったもの ) と ボタンを用意して、

ComboBoxのようなもの ( 以下 Combo ) の Text部に入っているデータがリスト部に設定されているデータ群 にまったくヒットしなかったら
"リストにありません。入力しなおしてください。" というようなalertを表示し再入力を促す。
-1 以外 ( リストにあるデータ ) なら そのページに移動する...

といった感じです。

私がイメージしていたのは、

ボタンが押されたときに動く関数 ( 以下 ButtonProc )と

リスト部にあるデータかどうかを調べる関数 ( 以下 CheckListIndex )

とあって、

ボタンが押された -> ButtonProc が呼ばれる -> ButtonProc内で CheckListIndex が呼ばれ、選択されているインデックスを調べる -> 戻り値が
-1 のとき データが存在しない。それ以外なら 存在する。 -> 戻り値が -1 なら "リストにありません。入力しなおしてください。" と表示し、それ以外なら 指定のページに移動する。

といった感じです。

指定のページ...

たとえば、
HTML の タグに埋め込まれている id が Combo のリスト部 ( datalist ) に入っていて、

true のとき ( つまり -1 以外 ) 、ページアドレス + "#" + 入力値

という感じにしたいのです。

たとえば、

"選択肢A" が選ばれている場合は

"Object.html#選択肢A"

に移動...
みたいに。

宜しくお願い致します。

Comments

[Lhankor_Mhy]

追記拝読。どちらの回答でも応用すればできると思うのですが、分からない部分はどこですか？

Answer 1

たとえばこんな感じでどうでしょうか？
（想定外のデータが入力されたときにどうしたいかによります）

<script>
window.onload=function(){
document.querySelector('[name="KeyWordEdit"]').addEventListener('change',function(e){
  var v=e.target.value;
  var n=e.target.list.options;
  var flg=false
  for(var i=0;i<n.length;i++){
    if(n[i].value==v){
      flg=true;
      break;
    }
  }
  if(!flg){
    alert('no!');
    e.target.value='';
  }
});
}
</script>
<form name="Asking">
<label id="TextBoxForKeyword">
キーワード:<input type="text" name="KeyWordEdit" list="KeywordsList">
</label>
<datalist id="KeywordsList">
<option value="選択肢A"></option>
<option value="選択肢B"></option>
<option value="選択肢C"></option>
<option value="選択肢D"></option>
<option value="選択肢E"></option>
</datalist>
</form>

Answer 2

e.target[0].list.optionsでリストが取得できます。

document.Asking.addEventListener('submit', e => 
  alert( 
    Array.prototype.map.call(e.target[0].list.options, elm => elm.value).indexOf(e.target[0].value)
  )
)

https://jsfiddle.net/6kv4161L/

質問の追記を受けて追記

ああ、もしかして、event.targetが取得できないということでお悩みなんでしょうか？
document.getElementById('KeywordsList').optionsでリストが取得できますのでお試しください。

Comments

[Lhankor_Mhy]

ああ、出遅れた……