数据列表标签中的图像

Question

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

由于 Safari 不支持数据列表，是否还有数据列表的替代方案？

<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> Foo Bar</option>。当该字体通过 @font-face 用作可下载字体时，技术上运行良好（所谓的图标字体使用类似技术），但它笨拙、有限（仅单色图标），并且理论上是错误的（私人使用代码点不应该用于public信息交换）。

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

数据列表标签中的图像

Image in datalist tag

html

image

html-datalist