Question

是否可以将图像添加到datalist选项中？我正在构建一个搜索我的用户的地方，我希望这个头像与在Twitter或Facebook上的数据列表中的名称和生物一起出现。 $avatar变量具有图像的链接或src。

还有替代datalist，因为Safari不支持datalist吗？

<form action='results.php'>
   <input list="Search" name="browser" placeholder="Search">
      <datalist id="Search">
    <?php
     $sql = mysql_query("SELECT * FROM profile where iduser!=$iduser ORDER BY username ");
                        while($row = mysql_fetch_array($sql)){                  
     $username = $row['username'];
     $bio = $row['bio'];
     $avatar = $row['avatar'];        
          echo "<option width='50px'value='$username'>/*Image and bio in here?*/</option>";
       }
       ?>
      </datalist>
   <input type=submit value=SEARCH />
</form>

Answer 1

不，因为预定义选项（通过支持浏览器）显示为仅包含option元素的文本内容的列表。虽然datalist元素的内容模型允许任何措辞内容（包括图像），但支持该元素的浏览器会忽略该内容;它仅用作后备内容（由浏览器显示，当datalist元素未出现在option元素内时，忽略select标记和option元素。

最接近于具有与选项相关联的图标的是使用包含图标的字体作为私人使用代码点（例如E + 0000）的字形，并将这些代码点插入到<option> Foo Bar</option>内容中，例如， @font-face。当该字体被用作可下载字体时，{{1}}技术上运行良好（所谓的图标字体使用类似的技术），它是笨拙的，有限的（只有单色图标），理论上是错误的（私人使用代码点不应该用于公共信息交换）。

关于其他方法，请考虑使用一组复选框或单选按钮以及可能包含图像的关联标签。由于这限制了对给定备选方案的选择，因此您需要添加一个自由文本输入字段以允许指定任何其他备选方案。

datalist标签中的图像

1 个答案: