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 数组中？

编辑：

或更好：有没有办法检查 javascript 输入字段中的文本是否是数据列表中的一个选项？

Answer 1

是的，有：

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

Answer 2

Answer for your "Or Better Part"

按照您的要求，在 JavaScript 中执行此操作应该很容易，无需转换为 json 数组和运行 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>

Javascript: 根据输入匹配数据列表选项

Javascript: Match datalist options based on input

html

javascript

php

input

datalist