autocomplete自动完成

//效果图

 

//jsp引入文件

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<link rel="stylesheet" type="text/css" href="${ctx}/css/jquery.autocomplete.css" />

<script src="${ctx}/javascripts/jquery.autocomplete.js" type="text/javascript"></script>

 

//js代码
$("#equipName").flushCache();    //刷新缓存
$("#equipName").autocomplete("${ctx}/dp/takePoints!getUnits.action",{
　　max: 30, //列表里的条目数
　　minChars: 0, //自动完成激活之前填入的最小字符
　　width: 92, //提示的宽度，溢出隐藏
　　scrollHeight: 300, //提示的高度，溢出显示滚动条
　　matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
　　//autoFill: false, //自动填充
　　mustMatch:true, //true：只会允许匹配的结果出现在输入框，默认为false
　　dataType: "json",
　　//multiple: false, //是否多个值（“，”隔开）
　　//matchSubset:true,
　　extraParams: {
　　　　equiptext: function(){ return encodeURIComponent($("#equipName").val()); }
　　},
　　parse: function(data) {
　　　　var datas = new Array();
　　　　if(data !=null && data.length > 0){
　　　　　　$.each(data, function(i,item) {
　　　　　　　　var _data = {
　　　　　　　　　　data:item,
　　　　　　　　　　value:item.name,
　　　　　　　　　　result:item.name
　　　　　　　　}
　　　　　　datas.push(_data);
　　　　　　})
　　　　}
　　　　return datas;
　　},
　　formatItem: function(row, i, max) {
　　　　return row.name;
　　},
　　formatResult: function(row) {
　　　　return row.name;
　　}
}).result(function(e, item, value) {
　　$("#equipName").val(row.name);
});

 

//service代码

@Override
public List<Map<String, Object>> findUnits(String equiptext) {
　　List<Map<String, Object>> dataList = new ArrayList<>();
　　StringBuffer sb = new StringBuffer();
　　List<Object> params = new ArrayList<>();
　　sb.append(" from Unit obj where (1=1) ");

　　if(equiptext != null && equiptext.length()>0){
　　　　sb.append(" and obj.equipAlias like ? ");
　　　　params.add("%"+equiptext+"%");
　　}
　　List<Unit> units = this.find(sb.toString(), params, null);
　　if(units != null && units.size()>0){
　　　　for (Unit unit : units) {
　　　　　　Map<String, Object> map = new HashMap<>();
　　　　　　map.put("name", unit.getEquipAlias());
　　　　　　map.put("id", unit.getId());
　　　　　　dataList.add(map);
　　　　}
　　}
　　return dataList;
}

 

//action代码

public void getUnits() throws UnsupportedEncodingException {
　　ITakePointsMap pointsMap = (ITakePointsMap) this.getMap();
　　List<Map<String, Object>> units = pointsMap.findUnits(URLDecoder.decode(equiptext,"UTF-8"));
　　JSONArray jsonArray = JSONArray.fromObject(units);
　　ResponseUtil.print(jsonArray.toString());
　　
}