没有合适的资源?快使用搜索试试~ 我知道了~
首页Html5新标签datalist实现输入框与后台数据库数据的动态匹配
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
15 下载量 85 浏览量
更新于2023-03-03
评论 1
收藏 60KB PDF 举报
HTML5新增的标签datalist实现输入中文/拼音首字母时,自动进入数据库模糊查询,并返回相应的结果,生成datalist,由于在输入框中的输入内容发生变化时,datalist会自动触发下拉框,解决方案非常好,下面通过本文给大家分享实例代码,需要的的朋友参考下吧
资源详情
资源评论
资源推荐
Html5新标签新标签datalist实现输入框与后台数据库数据的动态匹配实现输入框与后台数据库数据的动态匹配
HTML5新增的标签datalist实现输入中文/拼音首字母时,自动进入数据库模糊查询,并返回相应的结果,生成
datalist,由于在输入框中的输入内容发生变化时,datalist会自动触发下拉框,解决方案非常好,下面通过本文
给大家分享实例代码,需要的的朋友参考下吧
最近项目中涉及到一个小功能,客户在选择供应商时,由于供应商数目较多(大概3000个左右),因此直接生成下拉框显然
不现实,所以就更换解决方案,打算借助HTML5新增的标签datalist来实现输入中文/拼音首字母时,自动进入数据库模糊查
询,并返回相应的结果,生成datalist,由于在输入框中的输入内容发生变化时,datalist会自动触发下拉框,所以使用起来比
select更便捷。前端部分代码如下:
Html Code:
<!DOCTYPE html>
<html lang="en">
<head id="head">
<title>库存下拉框测试</title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="../../Common/content/jquery-1.7.2.min.js"type="text/javascript"></script>
<script src="../../Common/pages/include.js" class="include" type="text/javascript"></script>
<script src="../../Common/js/AjaxJson.js" type="text/javascript"></script>
<script src="../../Common/js/Setting.js" type="text/javascript"></script>
<script src="../../Common/js/Paging.js" type="text/javascript"></script>
<script src="../../Js/warehouseManage/testyy.js" type="text/javascript"></script>
</head>
<body class="">
<!--<![endif]-->
<div class="navbar"></div>
<div class="sidebar-nav"></div>
<div class="content">
<div class="header"><h1 id="ADU" class="page-title">下拉框测试</h1></div>
<div class="container-fluid">
<div class="row-fluid">
<!-- --------------------------多条件查询--------------------------------------------- -->
<div class="well" id="searchDemo">
<p>测试数据(默认均为d00001):<br> 昆山市大陆配件有限公司 ksdlpjyxgs <br>
亿真企业有限公司 yzqyyxgs <br>
泰州市安誊轴皮厂(集团厂) tzsatzpc(jtc)
</p>
</div>
按 供应商名动态匹配(中文或者拼音均可):
<input list="bro" id="name" oninput="this.value=this.value.replace(/^ +| +$/g,'');search('name','bro','name')" >
<datalist id="bro"></datalist>
</div>
</div>
</div>
</body>
<!-- -----------------------footer-------------------------- -->
<footer class="foot"></footer>
</html>
JavaScript Code:
var listobj=null; //datalist对象
var requestItem=null; //后台返回的json数据中所需的key值
var inputContent=null; //input标签对象
/**search()说明:
* inputID: input标签的ID
* datalistID: datalist标签的ID
* itemName: 后台返回的json数据中所需的key值(仅需表格中中文字段的属性名)
* */
function search(inputID,datalistID,itemName)
{
inputContent=document.getElementById(inputID);
var datalist=document.getElementById(datalistID);
//防止在无输入内容的情况下产生遗留下拉选项
if(inputContent.value.length==0||inputContent.value==" ")
{
var sub=datalist.childNodes;
if(sub.length>0)
{
for (var i =sub.length-1; i>=0 ; i--)
{
weixin_38592758
- 粉丝: 5
- 资源: 924
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0