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。虽然datalistelement\xe2\x80\x99s 内容模型允许任何短语内容（包括图像），但支持该元素的浏览器会忽略该内容；它仅用作后备内容（当datalist标记和option元素未出现在select元素内时，由忽略标记和元素的浏览器显示）。

\n\n

最接近使图标与选项相关联的方法是使用包含图标作为专用代码点（例如 E+0000）的字形的字体，并将此类代码点插入到内容中option，例如<option>&#xe000; Foo Bar</option>。当该字体通过技术上良好的方式用作可下载字体时@font-face（所谓的图标字体使用类似的技术），它是笨拙的，有限的（仅限单色图标），并且理论上是错误的（私人使用代码点不应在公共信息中使用）互换）。

\n\n

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

\n