zoukankan      html  css  js  c++  java
  • angular 之 jquery-autocomplete

    自动完成还是原来的 bassistance.de 好用,详细用法参考官网。

    angular的js paths配置及依赖关系不多说;

            'jquery': 'static/jquery-1.11.3/jquery.min',
            'jqueryMig': 'static/jquery-migrate-1.4.1.min',
            'autocomplete': 'static/jquery-autocomplete/jquery.autocomplete',
     'autocomplete':{deps:['jquery','jqueryMig']

    angular页面:

            <div class="form-row">
                <label class="label">用户编号</label>
                <input type="text" class="form-control" id="idUsrNo" placeholder="输入编号检索">
                <span>{{data.Code}}</span>
            </div>

    页面全部加载后,触发ready事件:

    <div ng-repeat="x in [0]" ng-ready=""></div>

    前端angular页面全部load后绑定autocomplete组件:

            $scope.$on('ready', function () {
                // $('#ui-role').selectpicker();
                $('#idUsrNo').autocomplete('/Service1.svc/getsup', {
                    minChars: 0,
                     233,// 下拉提示框的宽度
                    multiple: false,// 多选
                    matchContains: true,
                    autoFill: false,
                    parse: function(data) {// 数据先经过这里数据转换,再格式化formatItem
                        return $.map(eval(data), function(row) {
                            return {
                                data: row,// 传递原始数据
                                value: row.code + row.label,// 文本框输入的内容于value内容进行匹配过滤
                                result: row.label// 选择回车后文本框内显示的内容
                            }
                        });
                    },
                    formatItem: function(row, i, max) {
                        return row.code + " [" + row.label + "]";// 下拉提示框内显示的内容
                    }
                }).result(function(event, data){
                    $scope.data.Code = data.code;
                    $scope.$apply();// 用$apply来强制刷新数据
                    console.log(data);// 回车后选中的记录
                });
            });

    后台接口是wcf:q是文本框输入的查询条件

            [OperationContract]
            [WebGet(ResponseFormat = WebMessageFormat.Json)]
            List<m_supplier> GetSup(string q);

    enginx代理转发配置:不区分大小写

            location ~* /Service1.svc/ {
                proxy_pass   http://localhost:1735;
            }

    效果:

  • 相关阅读:
    材料订单不在IN_MO或者IN_SCFHEADER中
    FP ABPPMGR表 其它常用存储过程
    ORA-01578 ORACLE data block corrupted (file # 29, block # 2889087)
    PR合并回写
    MySQL优化
    分享一些JVM常见的面试题(转)
    怎么保证 redis 和 db 中的数据一致
    User space(用户空间) 与 Kernel space(内核空间)
    如何设计一个安全的对外接口?(转)
    Jstack命令详解
  • 原文地址:https://www.cnblogs.com/jonney-wang/p/9720908.html
Copyright © 2011-2022 走看看