如何获取选中datalist选项的data-phone属性值并赋值给输入框

如何从已选中的datalist选项中获取自定义data属性（例如data-phone）的值？目前选中选项后仅能获取到option的value值，无法读取对应的自定义data属性。

核心需求：将选中的datalist下option元素的data-phone属性值，赋值给关联输入框的data-phone属性。

HTML部分 #

<input type="text" name="patirnt_name" id="patirnt_name" list="patient_list" onfocus="getAllPatients()" value="" data-phone="">
<datalist id="patient_list">

</datalist>

jQuery部分 #

function getAllPatients() {
    let url = "{{ route('get-all-patient-ajax') }}";
    let list = $('#patient_list');

    let html = '';
    $.ajax({
        url: url,
        type: "GET",
        success: function(res) {
            let data = res.patients;

            $.each(data, function(index, value) {
                html +=
                    `<option value="${value.F_name}" data-phone="${value.phone}" >${value.F_name}</option >`;
            });

            list.html(html);

        },
        error: function(error) {
            console.log(error);
        }
    })
}

datalist本身没有专门的选项选中事件，用户选择datalist选项时只会触发关联输入框的input/change事件，这时候通过输入框的当前value匹配对应option即可拿到自定义属性，实现步骤如下：

• 监听id为patirnt_name的输入框的input事件
• 事件触发时获取输入框的当前值，遍历datalist下所有option做值匹配
• 找到匹配的option后读取其data-phone属性值，赋值给输入框的data-phone属性

直接在原有代码基础上添加如下事件绑定代码即可：

// 绑定输入框值变化事件，匹配选中的datalist选项
$('#patirnt_name').on('input', function() {
    const currentInputValue = $(this).val();
    let phone = '';
    // 遍历datalist选项匹配当前输入值
    $('#patient_list option').each(function() {
        if ($(this).val() === currentInputValue) {
            phone = $(this).data('phone');
            return false; // 匹配成功后终止遍历
        }
    });
    // 给输入框赋值自定义属性
    $(this).attr('data-phone', phone);
});

注意：如果存在多个患者姓名重复的情况，上述逻辑会匹配第一个同value的option，建议重名场景下在value中拼接唯一患者ID做区分，避免属性匹配错误。

内容的提问来源于stack exchange，提问作者Rajib Bin Alam