在选定的选项单击数据列表时填充多个/其他输入文本框

I have a select where the list is populated from a mysql database, upon selecting an option it populates the input text boxes using change function.

//select change function populates inputs
$(function(){
    $('#selectdata').change(function(){
        $('#lid').val($('#selectdata option:selected').data('lid'));
        $('#fname').val($('#selectdata option:selected').data('fname'));
        $('#lname').val($('#selectdata option:selected').data('lname'));
    });
});

Using this select:

<select id="selectdata">
     <?php 
         echo 
         "<option disabled selected hidden>Search Learner</option>";
         $result = mysqli_query($con, "SELECT * FROM learners ORDER BY FirstName") or die (mysqli_error());
         while ( $row=mysqli_fetch_assoc($result)) {
             echo "<option value='".$row['FirstName'].
                 "'data-lid='".$row['ID'].
                 "'data-fname='".$row['FirstName'].
                 "'data-lname='".$row['LastName'].
                 "'>" . $row['FirstName'] . " " . $row['LastName'] ."</option>";
         } 
    ?>
</select>

<!--input boxes that get populated-->
<input type="hidden" value="" id="lid" name="learnerid" placeholder="Learner ID">
<input type="text" value="" id="fname" name="firstname" placeholder="First Name" required>
<input type="text" value="" id="lname" name="lastname" placeholder="Last Name" required>

Now this is where I'm stuck, I would like to use a similar script feature but using a datalist instead of a select element. Is there any script which works in a similar manner but with a datalist? This is because after the datalist option is selected I need to submit (post) individual fields of the selected option into another mysql table. Sorry for making this a little lengthy, hope I get an answer.