首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery autoComplete 自定义回写样式

jquery autoComplete 自定义回写样式

作者头像
爱明依
发布2019-03-12 15:04:25
2.2K0
发布2019-03-12 15:04:25
举报
文章被收录于专栏:爱明依爱明依

一:页面定义可以接收输入字段的元素(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:页面显示数据自定义样式。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年08月01日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档