如何將輸入映射到我的數據列表選項？

Question

我的代碼如下：

HTML：

<input list="itemList" id="inputItemList"  type="text" class="form-control">
<datalist id="itemList" >
    <option value="Example" data-id="1">
</datalist>

Javascript：

var element = $("#inputItemList");
var itemName = element.val();
var id = element.attr('data-id');

通過Javascript，我將<option>添加到我的數據列表中，其中每個選項都以data-id的形式包含自定義數據。 我可能做錯了，但是當我在<input>查詢值時，我只有選項的值。 我無法從<option>獲取其他屬性。 有沒有解決的辦法？

我也嘗試在<datalist>獲取選定的選項，但是當我這樣做時，沒有任何選擇。

Answer 1

好的，這是解決方案。 您只需要偵聽輸入，然后對照所有選項進行檢查：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<input list="itemList" id="inputItemList" type="text" class="form-control">

<datalist id="itemList" >
    <option value="Example 1" data-id="1">
    <option value="Example 2" data-id="2">
    <option value="Example 3" data-id="3">
    <option value="Example 4" data-id="4">
</datalist>

<script type="text/javascript">
    $(document).on('change',$('#inputItemList'),function(e){
        var theID = checkOption($(e.target).val());
        if(theID) {
            return console.log('Found match: ' + theID);
        } else {
            return console.log('No Match Found!');
        }
    })
    function checkOption(val) {
        var theID;
        $('#itemList option').each(function(){
            if(val.toLowerCase() == $(this).val().toLowerCase()){
                theID = $(this).data('id');
            }
        })
        return theID;
    }
</script>