html 使用datalist项目记录

最新推荐文章于 2024-07-30 16:49:30 发布

贝塔贝卡贝

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量147

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Kiruthika/article/details/130892609

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <!-- 添加/取消关系 -->
    <div id="relationLayer">
        <div class="relation-wrapper">
            <label>关系名称：</label>
            <input type="text" class="relationName" list="relationNameList">
        </div>
        <datalist id="relationNameList">
        </datalist>
    </div>

    <script src="./jquery.js"></script>
    <script>
        let needSearchRelationName = true;//关系操作模糊查询——关系名称

        // 获取关系操作元素
        let relationNameIpt = document.getElementsByClassName('relationName')[0];//关系名称
        // 关系名称模糊查询
        watchIpt(relationNameIpt, (val) => {
            if (needSearchRelationName) {
                searchRelationData(val);
            }
        })

        // 获取关系名称值
        $('.relationName').change(function () {
            $('#relationNameList').hide();
            const curName = $(`#relationNameList option[value='${this.value}']`).attr('data-id');
            needSearchRelationName = false;
        })

        // 监听输入框
        function watchIpt(elem, callback) {
            let notChinese = true;
            elem.addEventListener('compositionstart', (e) => {
                notChinese = false;
            })

            elem.addEventListener('compositionend', (e) => {
                notChinese = true;
            })

            elem.addEventListener('input', (e) => {
                const curVal = e.target.value.trim();
                setTimeout(() => {
                    if (notChinese) {
                        if (curVal.length > 0) {
                            callback(e.target.value)
                        }
                    }
                })

            })
        }

        // 模糊搜索请求相应列表数据
        function searchRelationData(relationName) {
            $.ajax({
                url: 'requrl',
                type: "POST",
                data: {
                    relationName,
                },
                success: function (res) {
                    if (res.result === 'success') {
                        const { data } = res;
                        if (data.length > 0) {
                            relationNameRender(list);
                        }
                    } else {
                        layer.msg(res.msg);
                    }
                }
            })
        }

        // 关系名称下拉框数据
        function relationNameRender(list) {
            $('#relationNameList').html('');
            let optEle = '';
            list.forEach(item => {
                optEle += `<option value="${item.relation_name}" data-id="${item.relation_name}">`
            })

            $('#relationNameList').append(optEle);
        }

    </script>
</body>

</html>