数据列表搜索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获取属性的线索。