如何将输入映射到我的数据列表选项

How to map input to my datalist option?

本文关键字：我的 数据 列表 选项 映射 输入      更新时间：2023-09-26

我的代码如下：

.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>中获取选定的选项，但是当我这样做时，其中没有任何选择。

好的，这是解决方案。您只需要收听输入，然后检查所有选项：

<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>
相关文章：