html - datalist 标签中的图像

Question

是否可以将图像添加到数据列表选项中？我正在为我的用户构建一个搜索，我希望头像与姓名和简介一起显示在数据列表中，就像在 Twitter 或 Facebook 上一样。 $avatar变量具有指向图像的链接或 src。

由于 Safari 不支持 datalist，是否还有替代 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 元素时，它们将被显示)。

与选项关联的图标最接近的是使用包含图标作为专用代码点(例如 E+0000)的字形的字体，并将此类代码点插入 option内容，例如<option>&#xe000; Foo Bar</option> .当该字体通过 @font-face 用作可下载字体时技术上很好(所谓的图标字体使用类似的技术)，它笨拙，有限(只有单色图标)，理论上是错误的(私有(private)使用代码点不应用于公共(public)信息交换)。

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