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

效果:

最新文章

  1. java多线程wait notify join
  2. win7下安装Sass和compass
  3. 【转】UTF-8汉字正则表达式
  4. transform(变形)和transform-origin(变形原点)
  5. jquery select选中项 赋值
  6. 【html】【21】高级篇--搜索框
  7. 判断数据库表字段是否为null值,采用is null
  8. Java如何将Exception.printStackTrace()转换为String输出
  9. cocos2dx 字体BMFont,Atlas
  10. 【UWP】FFmpeg库的编译
  11. Java--Socket通信(双向)
  12. [数据结构]C语言栈的实现
  13. 【翻译】Ext JS 4——Ajax和Rest代理处理服务器端一场和消息的方法
  14. OGG-02803 Encountered a Data Guard role transition
  15. 【原】Java学习笔记007 - 流程控制
  16. JavaScript中常见的十五种设计模式
  17. IdentityServer4-Resource定义-翻译
  18. centos 修改文件权限
  19. 【Java面试题】52 java中会存在内存泄漏吗,请简单描述。
  20. 获取并安装XWAF框架压缩包(2)

热门文章

  1. 线上 ELK 集群健康值 red 状态问题排查与解决
  2. log(m+n)找第k大
  3. Hadoop完全分布式搭建全过程
  4. OCP最新题库052考题解析及答案-第37题
  5. iframe嵌套页面的跳转方式
  6. CF223C【Partial Sums】(组合数学+乱搞)
  7. ArchLinux pacman 提高俩倍下载速度方法
  8. 8,Phaser__并发且多阶段任务
  9. Angularjs和Ionic框架搭建webApp
  10. (STM32F4) IAP程式碼實現