datalist标记中的图像

是否可以将图像添加到datalist选项中？我正在为我的用户建立一个搜索，在那里我想让这个虚拟角色在Twitter或者Facebook上与数据列表中的名字和生物一起出现。 $avatar变量具有图像的链接或src。datalist标记中的图像

也有一种替代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>

来源

2015-01-04 Tim Tom

没有，因为示出了预定义的选项（由支持的浏览器），其仅由option元素的文本内容的列表。尽管datalist元素的内容模型允许包括图像在内的任何短语内容，但内容被支持该元素的浏览器忽略;它仅用作后备内容（当浏览器显示时，忽略datalist markup和option元素，当它们不出现在select元素内时）。

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

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

来源

2015-01-04 13:15:20

那好吧...... :(我不知道Twitter或Facebook使用的是什么 – 2015-01-04 13:43:12

@TimTom，他们使用其他技术，你可以通过查看它们的源代码在一定程度上看到它们。使用脚本，你可以创建一堆包含图像和名称的'div'元素，以便它们可以点击。 – 2015-01-04 14:17:53

datalist标记中的图像

回答

相关问题