前端：input自动补全

后台数据：

/**
 * 自动补全
 * @param q
 * @return
 */
@RequestMapping(value = "select", method = RequestMethod.GET)
public @ResponseBody List<Map<String, Object>> select(String q) {
        List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
            if (StringUtils.isNotEmpty(q)) {
                List<Filter> filters = new ArrayList<Filter>();
                filters.add(Filter.like("orderCarType", "%"+q.replace(" ", "%")+"%"));
                List<SpOrderCarPhoto> sellers = spOrderCarPhotoService.findList(null, filters, null);
                for (SpOrderCarPhoto seller : sellers) {
                    Map<String, Object> map = new HashMap<String, Object>();
                    map.put("id", seller.getId());
                    map.put("name", seller.getOrderCarType());
                    data.add(map);
                    }
                }
    return data;
}

 

前端js代码：

$(function(){
//商家选择
$("#sellerName").autocomplete("../dataAction/select.jhtml", {
    dataType: "json",
    max: 20,
    width: 350,
    scrollHeight: 300,
    parse: function(data) {
        return $.map(data, function(item) {
            return {
                data: item,
                value: item.name
            }
        });
    },
    formatItem: function(item) {
        if ($.inArray(item.id, new Array()) < 0) {
            return '<span title="' + item.name + '">' + item.name + '<\/span>';
        } else {
            return false;
        }
    }
}).result(function(event, item) {
    $("#sellerName").val(item.name);
    $("#sellerId").val(item.id);
    itemSelect(item.id);
});
});

 

前端input标签:

        <td style="text-align:right;height:30px;">车型：</td>
	<td>
	    <input type="hidden" value="" id="sellerId" name="sellerId"/>
	    <input type="text" class="input-text" value="${sellerName}" placeholder="" id="sellerName" name="sellerName">
	</td>

本站博客：www.wurao.xin