lwc datalist でid取得

微妙にしんどい入力可選択リストでのId処理
というかツールパレットなくってるやん。。。
steemitがんばって。。

元
https://github.com/enreeco/salesforce-lwc-autocomplete-datalist

html
<template>
<label if:true={isLabelDisp} class="slds-form-element__label" for="input">
<template if:true={required}>
<abbr class="slds-required" title="required">* </abbr>
</template>
{label}
</label>
<div class="slds-form-element__control">
<input id="input" name="input" list="valueList" placeholder={placeholder} required={required} class="slds-input" type="text" value={value} onblur={handleChange} />
<datalist id="valueList" class="">
<template for:each={values} for:item='item'>
<option key={item.key} data-id={item.key} value={item.value}>{item.value}</option>
</template>
</datalist>
</div>
</template>

js

import { LightningElement, api } from 'lwc';

export default class ComDatalist extends LightningElement {
    @api values;
    @api label = '';
    @api name = '';
    @api value = '';
    @api required;
    @api placeholder = '';
    @api isLabelDisp = false;
    initialized = false;

    renderedCallback() {
        if (this.initialized) {
            return;
        }
        this.initialized = true;
        //Idが動的なのでinputで使用するlistのIdをここで設定
        let listId = this.template.querySelector('datalist').id;
        this.template.querySelector("input").setAttribute("list", listId);
        console.log('★★★listId'+listId);
    }
    handleChange(evt) {
        this.value = evt.target.value;
        //console.log(this.name);
        //console.log(this.template.querySelector("datalist").firstElementChild.value);
        //datalistで反映されるのはvalueなのでvalueからIdを取得する必要がある＝セレクトの選択値は一意である必要がある
        let id;
        let elms = this.template.querySelector("datalist").children;
        let inputElem = this.template.querySelector("input");
        for (var i=0; i<elms.length; i++) {
            console.log(inputElem.value);
            if (elms[i].value == inputElem.value) {
                id = elms[i].getAttribute('data-id');
                break;
            }
        }
        this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: { value: evt.target.value, target: id } }));
    }
}

meta
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="autocomplete">
<apiVersion>51.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>

使い方
<c-com-datalist
values={supplierMap}
label="test"
name={supplierIdDisp}
value={supplierCpaNameDisp}
required=true
placeholder=""
onchange={handleSupplierChane}
></c-com-datalist>