Datalist搜索innerHTML而不是值？

I am attempting to create a way to search for a user by typing their name in a text field, then changing a list below. The easiest way I saw to do this way by using a datalist but it seems that a datalist's search go off the value and not the html of the element.

Is it possible to change the search from looking at the value to the html?

Context:

<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>

As you can see, I am assigning the userID to the value and not the name, I would like to be able to search for the name of the user without having to put it as the value, is this possible?

You can make up attributes in HTML5 by prefixing them with data-. So in your case you need to do it like this:

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

Now you can use javascript to get the vlues of the attributes.