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