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標記中的圖像

回答

相關問題