这几天做了一个前端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()">«</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()">»</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">×</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();
});}`
这样就可以实现在输入框中输入的同时对数据进行模糊查询。
