HTML中input输入框动态模糊匹配

最新推荐文章于 2024-06-24 13:50:58 发布

1988我想和这个世界谈谈

最新推荐文章于 2024-06-24 13:50:58 发布

阅读量3.5k

点赞数 2

分类专栏：随笔文章标签： HTML input输入框动态模糊匹配可输入可选择

本文链接：https://blog.csdn.net/malz_zh/article/details/103082213

版权

随笔专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML中的input输入框根据后台返回的动态模糊匹配输入的内容，可以选择，也可以输入，此处是使用的是HTML5新增的标签datalist来实现，不需要插件，页面加载完时直接将后台查询到的所有值赋给datalist，还有一种是输入框中有改变时都调用接口向后台查询一次，返回给前台，这里先不做介绍。

代码如下：

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--#include file="/saleweb/npage/public_title_name.html" -->
</head>
<body>
<div class="c-row pdt-l pdb-l">
    <div class="col-4">
        <div class="c-form-item">
            <p class="c-form-name">模板名称</p>
            <div class="c-form-info">
                <input type="text" name="tempName" id="tempName"  list="batch_list" autocomplete="off" placeholder="请输入" class="c-input"/>
                <datalist id="batch_list">
                </datalist>
            </div>
        </div>
    </div>
</div>
<div class="col-12" style="text-align: center; padding: 10px;">
    <div class="c-form-item">
        <button class="c-btn-l" onclick="qryseDiscountTempList(1)">查询</button>
        <button class="c-btn-l" type="reset" id="btn_reset">重置</button>
        <button class="c-btn-l" onclick="addDiscountTempMsg()">新建</button>
    </div>
</div>
</body>
</html>
<script src="./js/test.js"></script>

test.js 我这里后台返回的是一个json数组，

$(document).ready(function () {
    queryList();
});

function queryList() {
    var seDiscountTempMsg=[{NAME: "测试一", STATE_DATE: "20191115104955", STATE: "1", TEMP_ID: "104955011000001"},
        {NAME: "专线一", STATE_DATE: "20191115104918", STATE: "0", TEMP_ID: "104918011000000"},
        {NAME: "5G一", STATE_DATE: "20191114174557", STATE: "0", TEMP_ID: "174558011470000"}];
    var add_options;
    for(var i=0;i<seDiscountTempMsg.length;i++) {
        add_options += '<option value="' + seDiscountTempMsg[i].NAME + '">'+ seDiscountTempMsg[i].NAME + '</option>';
    }
    $("datalist#batch_list").append(add_options);
}

效果如下：