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

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);
}

效果如下：

注意：要引入jQuery：jquery-1.11.3.min.js，不然$(document)识别不出来，我这里是通过公共页面引入的。

HTML中input输入框动态模糊匹配相关推荐

【原创】微信小程序云开发通过input输入框动态修改云数据库的数据
[原创]微信小程序云开发通过input输入框动态修改云数据库的数据效果: 可以在小程序的显示界面中,渲染出数据库的相关内容,并且可以在显示界面中,直接修改数据库中的数据. 初始状态图: 点击获取数据 ...
HTML5中input输入框默认提示文字向左向右移动
HTML5中input输入框默认提示文字向左向右移动首先演示input输入框代码 <style>* {margin: 0;padding: 0;}.sousuo {width: 458p ...
如何隐藏Safari中input输入框内自带的小人图标
如何隐藏Safari中input输入框内自带的小人图标 problem 页面表单包含input,在 safari 浏览器下,右边有个小人标志并且在 safari 16.1 版本发现 safari 1 ...
解决React中input输入框在中文输入法下的bug
解决React 中input 输入框在中文输入法下的bug 需求:封装Input 组件,输入拼音过程中不触发onChange,拼音输入结束后触发onChange 原理:input 标签上面有两个事件, ...
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空
ios微信小程序中 input 输入框问题,输入的光标中的内容自动清空问题描述 1.我在页面上有个倒计时的功能,每一秒都在更新时间,更新时间显示的值(view一直变) 2.我调用input输入框,准 ...
ios端自动获取输入框焦点,解决ios手机中input输入框光标过长的问题
在项目中做移动端页面,发现IOS 的光标大小很大,和安卓的完全不一样,思考怎么调整大小,通过实践和尝试,找到了解决方法,现分享给大家. 修改前css部分代码: .receiving-info .rec ...
vue2.0_在vue中实现input输入框的模糊查询
前言我们要实现的一个效果是,当输入框输入值时,显示数据列表框并将检索到的数据在列表框当中做展示. 模糊查询功能原理分析其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询,也就是说用 ...
模糊查询是如何进行实现的_模糊查找，不是近似查找！在Excel中应该如何进行模糊匹配...
前两天,发了一篇文章,介绍了一个微软收集用户反馈的网站,如果你希望Excel中有什么功能,可以到这个网站上提交建议,或者给别人的建议投票,文章内容见这里: 你最想要的Excel功能是什么? 有一位同学 ...
ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景
一. 代码环境 "react": "18.1.0", "antd": "^4.20.5", "typescri ...

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

HTML中input输入框动态模糊匹配相关推荐

最新文章

热门文章