您现在的位置是:首页 > 文章详情

前端实现输入框input输入时,调用后台查询。

日期:2018-04-16点击:497

这几天做了一个前端html页面,基于bootstrap框架开发,里面有个需求就是在输入框中输入字母或者文字时,下拉框自动刷新模糊查询出的信息。最初我的想法是监控键盘上的按键输入,每次输入一个字母后,发送异步请求至服务端进行数据查询。但是后来发现,这种方式做出来会有一个问题,就是这个监控是全局的,也就是页面刷新后,只要你按键盘,就会调用异步请求发送数据,这样跟我的设计思路是有出入的。
然后我查了很多资料,发现有一种方式可以监控某个输入框体中的变化,只要框体内容有变化,就会触发函数。具体实现如下。
首先先写好前端html,前端开发时先引入jquery和bootstrap相关组件:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> <script type="text/javascript" src="../jquery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../include/js/einvoice/einvoice-mobile.js"></script> <title>电子发票相关</title> </head> <body> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading"> <h2 class="panel-title">电子发票申请与下载</h2> </div> <div class="panel-body"> <div class="row"> <div class="col-sm-6 col-md-6 col-lg-6"> <!-- <div class="form-group has-error"style="margin-bottom: 10px;" id="policyNoModule"> <div class="input-group input-group-sm"> <span class="input-group-addon">保单号</span> <input type="text" class="form-control" id="policyNo" placeholder="请输入保单号"> </div><br> </div> --> <!-- <div class="form-group has-success has-feedback"> --> <div id="policyNoInputBox"> <label class="control-label" for="policyNo">保单号</label> <input type="text" class="form-control" aria-describedby="inputSuccess2Status" id="policyNo" placeholder="请输入保单号(必填)"> <!-- <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> --> </div> </div> <div class="col-sm-6 col-md-6 col-lg-6"> <!-- <div class="input-group input-group-sm"> <span class="input-group-addon">产品代码</span> <input type="text" class="form-control" id="productCode" placeholder="请输入产品代码"> </div><br> --> <!-- <div class="form-group has-success has-feedback"> --> <div id="productCodeInputBox"> <label class="control-label" for="productCode">产品代码</label> <input type="text" class="form-control" aria-describedby="inputSuccess2Status" id="productCode" placeholder="请输入产品代码(必填)"> <!-- <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> --> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-md-6 col-lg-6"> <!-- <div class="input-group input-group-sm"> <span class="input-group-addon">发票抬头</span> <input type="text" class="form-control" id="invoiceTitle" placeholder="请输入发票抬头"> </div><br> --> <!-- <div class="form-group has-success has-feedback"> --> <div id="invoiceTitleInputBox"> <label class="control-label" for="invoiceTitle">发票抬头</label> <input type="text" class="form-control" aria-describedby="inputSuccess2Status" id="invoiceTitle" placeholder="请输入发票抬头(必填)"> <!-- <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> --> </div> </div> <div class="col-sm-6 col-md-6 col-lg-6"> <!-- <div class="input-group input-group-sm"> <span class="input-group-addon">纳税人识别号</span> <input type="text" class="form-control" id="taxPayerNo" placeholder="请输入纳税人识别号"> </div><br> --> <!-- <div class="form-group has-success has-feedback"> --> <div id="taxPayerNoInputBox"> <label class="control-label" for="taxPayerNo">纳税人识别号</label> <input type="text" class="form-control" aria-describedby="inputSuccess2Status" id="taxPayerNo" placeholder="请输入纳税人识别号(必填)"> <!-- <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> --> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-md-6 col-lg-6"> <div id="channelNoInputBox"> <label class="control-label" for="channelText">投保渠道</label> <input type="text" class="channel form-control dropdown-toggle" data-toggle="dropdown" aria-describedby="inputSuccess2Status" id="channelText" placeholder="请选择投保渠道(必填)"> <!-- <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> --> <input type="hidden" id="channelNo"> <input type="hidden" id="currentpage" value="1"> <ul class="dropdown-menu" role="menu" id="channel-menu"> <li class="divider"></li> <li id="paging"> <ul class="pagination pagination-sm" style="margin: 0 0;"> <li><a href="#" id="previous" data-stopPropagation="true" onclick="prevPage()">&laquo;</a></li> <!-- <li><a href="#" data-stopPropagation="true">1</a></li> <li><a href="#" data-stopPropagation="true">2</a></li> <li><a href="#" data-stopPropagation="true">3</a></li> <li><a href="#" data-stopPropagation="true">4</a></li> --> <li><a href="#" id="next" data-stopPropagation="true" onclick="nextPage()">&raquo;</a></li> </ul> </li> </ul> </div> </div> <div class="col-sm-6 col-md-6 col-lg-6"> <div id="isPersonalInputBox"> <label class="control-label" for="isPersonalText">发票类型</label> <input type="text" class="channel form-control dropdown-toggle" data-toggle="dropdown" aria-describedby="inputSuccess2Status" id="isPersonalText" placeholder="请选择发票类型"> <!-- <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> --> <input type="hidden" id="isPersonal"> <ul class="dropdown-menu" role="menu"> <li> <a href="#">个人发票</a> <input type="hidden" value="true"> </li> <li> <a href="#">公司发票</a> <input type="hidden" value="false"> </li> </ul> </div> </div> </div> <div class="form-group"> <label for="name">备注</label> <textarea class="form-control" rows="3" id="extend"></textarea> </div> <div class="row"> <div class="col-sm-2 col-md-2 col-lg-2"></div> <div class="col-sm-8 col-md-8 col-lg-8"> <!-- 按钮触发模态框 --> <button type="button" class="btn btn-info btn-block" data-toggle="modal" id="openModal">确定</button> </div> <div class="col-sm-2 col-md-2 col-lg-2"></div> </div> </div> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">电子发票信息</h4> </div> <div class="modal-body"> <table class="table table-striped"> <caption>电子发票基本信息</caption> <thead> <tr> <th>参数</th> <th>参数内容</th> </tr> </thead> <tbody id="einvoice-msg-tbody"> <tr id="tr-policyNo"> <td>保单号</td> </tr> <tr id="tr-productCode"> <td>产品代码</td> </tr> <tr id="tr-channelName"> <td>投保渠道</td> </tr> <tr id="tr-personalName"> <td>发票类型</td> </tr> <tr id="tr-taxPayerNo"> <td>纳税人识别号</td> </tr> <tr id="tr-invoiceTitle"> <td>发票抬头</td> </tr> <tr id="tr-extend"> <td>备注</td> </tr> </tbody> </table> <!-- <div class="alert alert-success">该电子发票已申请,并且申请成功!</div> <div class="alert alert-info">此电子发票还未申请!请核对后提交!</div> --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="applyButton">申请</button> <button type="button" class="btn btn-primary" id="downloadButton">下载</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </div> </div> </body> </html>

我需要在焦点锁定投保渠道的输入框时弹出下拉组件(bootstrap中有案例可以直接使用),在输入时像后台发送异步请求,获取想要的数据信息,具体js的实现方法如下:
//监控渠道信息输入状态,根据渠道开头字母模糊查询渠道信息并加载下拉框。

$("#channelText").bind('input propertychange',function(){ delectChannelMenu(); getPageChannelMenu(currentpage,$("#channelText").val()); });``` jquery中的bind(type,[data],fn)方法,为每个匹配元素的特定事件绑定事件处理函数。type为```input propertychange```就是译为当input标签中的属性发生改变时触发函数fn,触发后先执行删除菜单中的内容,再更新菜单中的内容。两个方法具体如下:
  • 清空渠道下拉菜单
    */

function delectChannelMenu(){

var count=$('#channel-menu').children().length; for(var i=0;i<count-2;i++){ $('#paging').prev().prev().remove(); } var pagesCount=$($('#paging').children()[0]).children().length; for(var i=0;i<pagesCount-2;i++){ $('#next').parent().prev().remove(); }

}`

 * 发送请求获取渠道 */ function getPageChannelMenu(currentpage,channelCode){ //发送请求获取渠道 var url = '/NCPI/thridPlatform_getPageMsg.do'; $.ajax({ type:"POST", url:url, //防止自动转换数据格式。 data: {currentPage:currentpage,channelCode:channelCode}, async :false, success:function(msg){ pageCount=msg.pageCount; LoadChannelMenu(msg.thridPlatformList,msg.pageCount); } }); }```
  • 加载渠道菜单
  • @param obj 渠道对象数组
    */

function LoadChannelMenu(obj,pageCount){

var menuObj = $('#paging').prev(); for(var i=0;i<obj.length;i++){ menuObj.before('<li><a href="#">'+obj[i].channelCode+'|'+obj[i].channelName+'</a><input type="hidden" value="'+obj[i].channelCode+'"></li>'); } var htmlObj=""; for(var i=1;i<=pageCount;i++){ htmlObj+='<li><a href="#" data-stopPropagation="true" onclick="turnPage(this)">'+i+'</a></li>' if(i==5){ break; } } $('#next').parent().before(htmlObj); $('a').click(function(){ var id=$(this).parent().parent().parent().attr("id"); if(id=='channelNoInputBox'){ //操作选择渠道 $('#channelText').val($(this).html()); $('#channelNo').val($(this).next().val()); } }); $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(e) { e.stopPropagation(); });

}`
这样就可以实现在输入框中输入的同时对数据进行模糊查询。

原文链接:https://yq.aliyun.com/articles/582467
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章