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

这几天做了一个前端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

 
   }` 
    * 发送请求获取渠道
 */
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[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();  
}); 
   }`
 这样就可以实现在输入框中输入的同时对数据进行模糊查询。

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

电子发票申请与下载

你可能感兴趣的:(前端实现输入框input输入时，调用后台查询。)