Javascript：根据输入匹配数据列表选项答案

【问题标题】：Javascript: Match datalist options based on inputJavascript：根据输入匹配数据列表选项
【发布时间】：2016-08-05 17:19:53
【问题描述】：

我有一个带有数据列表的文本输入。这个数据列表是用 php 动态填充的：

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

有没有一种简单的方法可以将所有 datalist 选项存储在 javascript 数组中？

编辑：

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

【问题讨论】：

标签： javascript php html input datalist

【解决方案1】：

是的，有：

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

【讨论】：

【解决方案2】：

回答你的“或更好的部分”

按照您的要求，在 JavaScript 中执行此操作应该很容易，无需转换为 json 数组并运行 javascript 匹配。

附上一个示例 sn-p。这是检查输入中输入的值是否与任何选项匹配的示例。

这就是它的作用，在输入的每个按键上，它都会检查数据列表中是否有与用户输入的输入相匹配的选项。您可以更改过滤器功能的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>

【讨论】：