jquery autoComplete 自定义回写样式
来源:互联网 发布:疯狂淘宝李涛微博 编辑:程序博客网 时间:2024/06/07 23:55
一:页面定义可以接收输入字段的元素(input textarea等)
<form:input path="itemName" id="itemName" htmlEscape="false" class="form-control" maxlength="32"
data-parsley-required="true" placeholder="请搜索要补录的项目"/>
二:给元素绑定Autocomplete -通过元素的Id绑定。
参数详解: 必须的参数:url和配置对象。
$("#itemName").autocomplete(url,{
minChars: 0, //在触发autoComplete前用户至少需要输入的字符数.
max: 20,//autoComplete下拉显示项目的个数
autoFill: false, //要不要在用户选择时自动将用户当前鼠标所在的值填入到input框
//mustMatch: true, //autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框
matchContains: true, //决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和
multipleSeparator: '',//如果是多选时,用来分开各个选择的字符.
multiple: false, //是否允许输入多个值即多次使用autoComplete以输入多个值
cacheLength: 20,
delay:500,
scrollHeight: 1000,
matchSubset:false,
width: "30%",
dataType: 'json',
method: 'POST',
parse: function (data) {
var rows=[];
rows[rows.length] = {
data: data[i],
value: data[i].id,
result: data[i].itemName
};
return rows;
}, formatItem: function (data, i, max) {//格式化列表中的条目 row:条目对象,i:当前条目数,max:总条目数
return "<div style='margin-bottom: 10px;font-size: 20px;'>"+data.itemName + "|" + data.price+"元</div>";
}
});
重点说明:parse: 加载到远程JSON 数据 ,在前台的处理方式。
formatItem:页面显示数据自定义样式。
- jquery autoComplete 自定义回写样式
- Jquery autocomplete
- Jquery autocomplete
- jQuery Autocomplete
- jquery.autocomplete
- jquery.autocomplete
- Jquery autocomplete
- Jquery autocomplete
- Jquery autocomplete
- jQuery Autocomplete
- jQuery.AutoComplete
- jquery.autocomplete
- JQuery Autocomplete
- jquery.autocomplete
- Jquery autocomplete
- Jquery Autocomplete
- jquery-autocomplete
- jQuery -- autocomplete
- 【Android 控件架构】详解Android控件架构与常用坐标系
- 图像配准(Image Registration)简介
- so库又一次遇到 undefined symbol------ldd, nm, c++filt命令大显身手
- 跨域请求 JSONP & CORS
- JStorm与Storm源码分析(七)--BasicBoltExecutor与装饰模式
- jquery autoComplete 自定义回写样式
- 动态代理
- 姿态解算(二),姿态更新
- jdk 源码分析(1)java hashmap的结构
- sbc(三)自定义Starter-SpringBoot重构去重插件
- 51nod-1299 监狱逃离(贪心)
- javascript高级程序设计--第五章基本包装类型开始
- Nginx教程-location配置
- Nginx 反向代理 Tomcat