AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2018-04-17 4791
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这几天做了一个前端html页面，基于bootstrap框架开发，里面有个需求就是在输入框中输入字母或者文字时，下拉框自动刷新模糊查询出的信息。最初我的想法是监控键盘上的按键输入，每次输入一个字母后，发送异步请求至服务端进行数据查询。

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

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

文章标签：
JavaScript
Java
前端开发
监控
关键词：
前端后台
前端查询
前端输入框
前端input
前端实现
道之若无
目录
相关文章
不吃核桃
|
3月前
|
前端开发 JavaScript Serverless
中后台前端开发问题之通过低代码实现前后端交互如何解决
中后台前端开发问题之通过低代码实现前后端交互如何解决
不吃核桃
40 0
白雾茫茫丶
|
1月前
|
前端开发 JavaScript 关系型数据库
前端的全栈之路：基于 Vue3 + Nest.js 全栈开发的后台应用
这篇文章介绍了一个名为Vue3Admin的全栈后台应用，前端基于SoybeanAdmin二次开发，后端基于Nest.js。主要使用了Vue3.5、AntDesignVue、UnoCSS、Pinia等前端技术栈，以及Nest.js、PostgreSQL、Prisma等后端技术栈。文章详细描述了系统的功能设计，包括动态国际化语言配置、登录用户操作日志、用户和角色权限映射、动态路由菜单、消息公告发布及前端业务功能等。同时，也提供了项目运行所需的环境和依赖，以及如何拉取代码、安装依赖和启动项目的方法。最后，文章展示了项目的演示图，并对项目进行了总结，指出项目未经严格测试，仅供学习交流使用。
白雾茫茫丶
43 1
前端的全栈之路：基于 Vue3 + Nest.js 全栈开发的后台应用
土木林森
|
10天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘：JS如何将后台时间戳秒变亲切小时前、分钟前，让用户秒懂，提升互动体验！"
【10月更文挑战第23天】在Web开发中，将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能，通过计算当前时间和时间戳的差值，返回相应的描述，提升用户体验。
土木林森
18 0
不吃核桃
|
3月前
|
运维 前端开发 Serverless
中后台前端开发问题之流程编排如何解决
中后台前端开发问题之流程编排如何解决
不吃核桃
31 0
不吃核桃
|
3月前
|
前端开发 算法 Serverless
中后台前端开发问题之保证用户的token等信息的唯一性和不可伪造性如何解决
中后台前端开发问题之保证用户的token等信息的唯一性和不可伪造性如何解决
不吃核桃
45 0
不吃核桃
|
3月前
|
前端开发 安全 Serverless
中后台前端开发问题之云服务商在Serverless与低代码融合如何解决
中后台前端开发问题之云服务商在Serverless与低代码融合如何解决
不吃核桃
29 0
不吃核桃
|
3月前
|
前端开发 数据库 Python
中后台前端开发问题之验证用户提供的uid和token的有效性如何解决
中后台前端开发问题之验证用户提供的uid和token的有效性如何解决
不吃核桃
19 0
不吃核桃
|
3月前
|
存储 前端开发 Serverless
中后台前端开发问题之Django项目中接收和处理用户的抽奖请求如何解决
中后台前端开发问题之Django项目中接收和处理用户的抽奖请求如何解决
不吃核桃
18 0
不吃核桃
|
3月前
|
运维 前端开发 Serverless
中后台前端开发问题之降低数据库使用门槛和运维成本如何解决
中后台前端开发问题之降低数据库使用门槛和运维成本如何解决
不吃核桃
29 0
不吃核桃
|
3月前
|
存储 运维 前端开发
中后台前端开发问题之定义编排对象如何解决
中后台前端开发问题之定义编排对象如何解决
不吃核桃
26 0

热门文章

最新文章

  • 1
    前端常见Vue2.0面试题
  • 2
    lemon oa前端页面——由user-base-list谈项目组织
  • 3
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 4
    使用人人开源快速搭建项目前后端框架（附带商品分类管理示例），生成CRUD代码以及前端界面
  • 5
    前端 时间个性化 插件 jquery.timeago.js
  • 6
    前端分页插件pagination
  • 7
    [前端]jekyll+markdown+github搭建个人博客
  • 8
    wordpress页面前端添加编辑按钮
  • 9
    前端点击其他输入框的时候，对当上个输入框进行判断（鼠标移出输入框事件，和鼠标点击其他输入框触发事件）
  • 10
    前端路由(五)2
  • 1
    前端进度条组件NProgress
    77
  • 2
    前端效果 登入界面
    46
  • 3
    vue前端展示【1】
    27
  • 4
    nvm,npm,yarn相关指令，前端配置准备
    51
  • 5
    深入浅出JVM（六）之前端编译过程与语法糖原理
    47
  • 6
    HTML5基础题及答案——必刷前端题目(背)
    53
  • 7
    前端 基础标签
    29
  • 8
    PHP医院安全不良事件管理系统源码（AEMS）前端vue2+element+后端laravel8不良事件上报与闭环管理
    77
  • 9
    前端基础知识
    56
  • 10
    如何处理前端应用程序中的异步操作
    55

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！