Javascript：入力に基づいてデータリストオプションを一致させよ

Question

データリストにテキストを入力しました。このデータリストは、PHPで動的な満たされている：

<input type="text" name="city" list="cities" id="city"> 
    <datalist id="cities"> 
     <?php 
     foreach($cities as $city){ 
     echo '<option value="'.$city.'" />'; 
     } 
     ?> 
    </datalist> 
</input> 

javascript配列内のすべてのデータリストのオプションを格納するための簡単な方法はありますか？

EDIT：

またはそれ以上：入力フィールドにテキストがデータリスト内のオプションがある場合はJavaScriptを使用して確認する方法はありますか？

Answer 1

回答あなたの「orベターパート」

のためにちょうど、JavaScriptでこれを行うにはかなり簡単なはずJavaScriptの一致を実行しています。

添付のサンプルスニペット。入力で入力された値がオプションのいずれかと一致するかどうかを調べる例を次に示します。

入力の各キーアップで、入力された入力ユーザーと一致するオプションがデータリストにあるかどうかを確認します。任意の種類のマッチングを行うために、フィルタ関数の一部をreturnに変更することができます。

$("#city").on('keyup',function(e){ 
 
    var option = $('#cities option').filter(function() { 
 
     return this.value === $("#city").val(); 
 
    }).val(); 
 
    
 
    if(option) $("#output").html("Match Found:"+ option) 
 
    else $("#output").html(""); 
 
});

#output{ 
 
    margin-top: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input type="text" list="cities" id="city"> 
 

 
<datalist id="cities"> 
 
    <option value="Volvo"> 
 
    <option value="Saab"> 
 
    <option value="Mercedes"> 
 
    <option value="Audi"> 
 
</datalist> 
 

 
<span id="output"></span>

Answer 2

はい、あります：あなたはJSON配列に変換せずに尋ねるよう

var cities = <?=json_encode($cities)?>;