这几天做了一个前端html页面，基于bootstrap框架开发，里面有个需求就是在输入框中输入字母或者文字时，下拉框自动刷新模糊查询出的信息。最初我的想法是监控键盘上的按键输入，每次输入一个字母后，发送异步请求至服务端进行数据查询。但是后来发现，这种方式做出来会有一个问题，就是这个监控是全局的，也就是页面刷新后，只要你按键盘，就会调用异步请求发送数据，这样跟我的设计思路是有出入的。

然后我查了很多资料，发现有一种方式可以监控某个输入框体中的变化，只要框体内容有变化，就会触发函数。具体实现如下。

首先先写好前端html，前端开发时先引入jquery和bootstrap相关组件：

电子发票相关

我需要在焦点锁定投保渠道的输入框时弹出下拉组件(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

$('#paging').prev().prev().remove();

}

var pagesCount=$($('#paging').children()[0]).children().length;

for(var i=0;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

menuObj.before('

'+obj[i].channelCode+'|'+obj[i].channelName+'');

}

var htmlObj="";

for(var i=1;i<=pageCount;i++){

htmlObj+='

'+i+''

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

});

}`

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