jquery autoComplete 自定义回写样式

欢迎关注博主公众号：【纯洁的明依】文章由陈晓阳原创。
本人微信：chenxiaoyangzxy. 免费提供本人大量学习资料。

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