Question

我有一个工作表单，我想将输入字段转换为使用HTML5数据列表，以便它们自动完成，我已经尝试了在线的各种示例但由于某种原因我没有让它工作。

我还应该补充说，数据是从一个从我转换成数组的api返回的json文件开始的，如果从json数据开始有更好的方法可能很重要。

感谢任何帮助。

由于

戈登

旧工作代码

<select name="group[]">
    <option value=""></option>
    <?php
        foreach ($groups as $group) {
    ?>
        <option value="
            <?php echo $group["name"];?>">
            <?php echo $group["name"];?>
        </option>
    <?php
        }
    ?>
</select>

新代码的最新尝试

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

解决方案，在睡觉后想通了！希望它能帮助别人

<input type="text" id="groups" list="group" id="grp"/>
  <datalist id="group">
     <?php foreach ($groups as $group) { ?>
         <option value="<?php echo $group['name']; ?>">
         <?php echo $group['name']; ?></option>
     <?php } ?>
</datalist>

Answer 1

为什么输入标记和datalist标记具有相同的ID？此外，您还需要添加提交按钮。另外，正如我看到你的代码有一个错误

echo "<option value=" . $group['name'] . "</option>" ;

应该是，

echo "<option value=" . $group['name'] . "></option>" ;
                                          ^ closing tag. Missing here

标签未关闭。

链接到一个小工作示例小提琴 - https://jsfiddle.net/s3864qxy/1/

<input list="browsers" name="browser">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>
<input type="submit">

希望有所帮助！

将表单输入字段内容转换为HTML5 datalist

1 个答案: