轉換表單輸入字段內容到HTML5的DataList

我有我想轉換輸入字段使用HTML5 datalists讓他們自動完成，我已經試過各種網上實例工作形式，但由於某種原因，我的沒有得到它上班。轉換表單輸入字段內容到HTML5的DataList

我還要補充的是，數據從我轉換成一個陣列的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>

來源

2016-02-03 ruraldev

爲什麼你的輸入標籤和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">

希望幫助！

來源

2016-02-03 17:12:27 hkasera

*標籤未關閉* - Sharp Eye。 –

謝謝你，我添加了結束標記並更改了datalist等，以便它們具有不同的id，但在該字段中仍然沒有數據。由於還有其他字段，提交位於表單的末尾。 – ruraldev

轉換表單輸入字段內容到HTML5的DataList

回答

相關問題