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>

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

编辑：

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

Answer 1

是的，有：

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

Answer 2

回答你的＆＃34;或更好的部分＆＃34;

如果没有转换为json数组并运行javascript匹配，请在JavaScript中执行此操作非常容易。

附上一个示例代码段。以下是检查输入中输入的值是否与任何选项匹配的示例。

这就是它的作用，在输入的每个键盘上，它检查数据列表中是否有与输入的输入用户匹配的选项。您可以更改过滤器功能的return部分以进行任何类型的匹配。

＆＃13;

$("#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("");
});

＆＃13;

#output{
  margin-top: 30px;
}

＆＃13;

<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>

＆＃13;

Javascript：根据输入匹配datalist选项

2 个答案: