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;
        }

效果：