zoukankan      html  css  js  c++  java
  • 自动补全Typeahead

    采用 Typeahead (Bootstrap-3-Typeahead-master)

     

    <script type="text/javascript"
        src="/js/plugins/bootstrap3-typeahead.min.js"></script>
    <script type="text/javascript">//自动补全
            $("#loginInfoDisplay").typeahead({
                minLength:3,//最小开始查询的字符个数
                items:5,//下拉列表中最多显示的条数
                source:function(query,process){//加载数据源
                    $.ajax({
                        dataType:"json",
                        type:"POST",
                        url:"vedioAuth_autocomplate.do",
                        data:{str:query},
                        success:function(data){//这个data就是一个json对象的数组{id:xx,username:xxxx}
                            if(data && data.length){
                                process(data);//process就是交给我们获得数据之后用来调用的方法,这个方法执行了,下拉列表就出来了
                            }
                        }
                    });
                },
                //用来告诉typeahead怎么显示json对象中的内容
                displayText:function(item){
                    return item.username
                }
            }).change(function(){
                var current = $(this).typeahead("getActive");
                if(current){
                    $("#loginInfoValue").val(current.id);
                }
            });
    </script>
                     <div class="col-sm-6">
                                    <div class="dropdown" id="autocomplate">
                                        <input type="text" class="form-control" id="loginInfoDisplay"
                                            autocomplete="off" /> <input type="text" name="loginInfoValue" id="loginInfoValue"/>
                                    </div>
                                </div>

    =========================================================================

    /**
         * 用于用户的automcomplate
         */
        @RequestMapping("vedioAuth_autocomplate")
        @ResponseBody
        public List<Map<String, Object>> autoComplate(String str){
            return userinfoService.autoComplate(str);
        }

    =============================================================

    @Override
        public List<Map<String, Object>> autoComplate(String keyword) {
            
            return this.userinfoMapper.autoComplate(keyword);
        }

    =============================================================

    <select id="autoComplate" resultType="hashmap">
          SELECT id,username 
          FROM logininfo WHERE username LIKE concat(#{keyword},'%')
      </select>
  • 相关阅读:
    Ubuntu下iperf的安装
    frp内网穿透协助内网程序(如微信相关)开发
    Uncaught Error: Call to undefined function mcrypt_get_iv_size() 解决办法
    CentOS安装了iRedMail停用Amavisd + ClamAV + SpamAssassin
    申请Let’s Encrypt通配符HTTPS证书(certbot ACME v2版)
    关于ThinkPHP在Nginx服务器下因PATH_INFO出错的解决方法
    本地开发环境伪装成SSL连接的实现
    Web基础之日志
    Linux基础之防火墙
    面向接口及单例工厂随笔
  • 原文地址:https://www.cnblogs.com/jokerq/p/8623827.html
Copyright © 2011-2022 走看看