5

是否可以将图像添加到数据列表选项中？我正在为我的用户构建一个搜索，我希望头像与名称和生物一起出现在数据列表中，就像在 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>
4

1 回答 1

4

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

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

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

于 2015-01-04T13:15:20.260 回答