數據列表搜索innerHTML而不是值？

Question

我試圖通過在文本字段中鍵入用戶名，然后更改下面的列表，來創建一種搜索用戶的方法。 我看到的最簡單的方法是使用datalist但似乎數據列表的搜索超出了value而不是元素的html 。

是否可以將搜索從查看value更改為html ？

內容：

<input class="mrg-btm" type="text" placeholder="Search..." list="users" />
  <datalist id="users" name="formSec" required>
    <?php
    $get = $users->prepare("SELECT userID,userFirst,userLast FROM users");
    $get->execute();
    $get->store_result();
    $get->bind_result($userID,$userFirst,$userLast);
    while($get->fetch()) {
    ?>
    <option value="<?php echo $userID; ?>"><?php echo $userFirst. ' ' .$userLast; ?></option>
    <?php
    };
    $get->close();
    ?>
  </datalist>

如您所見，我將userID分配給value而不是名稱，我希望能夠搜索user而不必將其作為value ，這可能嗎？

Answer 1

您可以在HTML5中添加data-作為前綴來構成屬性。 因此，在您的情況下，您需要這樣做：

<option value="<?php echo $userID; ?>" data-userFirst="<?php echo $userFirst ?>" data-userLast="<?php echo $userLast ?>"><?php echo $userFirst. ' ' .$userLast; ?></option>

現在，您可以使用javascript獲取屬性的線索。