Datalist search innerHTML rather than value?

Question

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?

Answer 1

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.