码迷,mamicode.com
首页 > Web开发 > 详细

angular 之 jquery-autocomplete

时间:2018-09-28 22:05:16      阅读:384      评论:0      收藏:0      [点我收藏+]

标签:message   配置   com   web   service   for   multi   targe   plugin   

自动完成还是原来的 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,
                width: 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;
        }

效果:

技术分享图片

 

angular 之 jquery-autocomplete

标签:message   配置   com   web   service   for   multi   targe   plugin   

原文地址:https://www.cnblogs.com/jonney-wang/p/9720908.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!