因为项目需要，需要做输入框自动提示功能，之前我只是使用过这种功能，相信大家也都使用过，百度~现在要让我自己做，好吧，还是百度一下，百度搜索“输入框自动提示”，弹出一对页面，也看了一堆文章，有自己开发的，也有插件的。
最后经过几次试验，我选择了JQuery.Autocomplete这款插件，还行吧用着，支持本地也支持ajax访问服务器，这款插件是基于jquery的，各位若有项目需要使用的，可以尝试一把。
源码下载：
JQuery.AutoComplete本地自动提示的方式我就不说了，各位下载源码之后看一下也就明白了，当然不明白的也可以问我，说一下ajax访问服务器的方式吧，直接上代码最为直接：
$(function(){
var onAutocompleteSelect =function(customer) {
$('#customerIdString').val(customer.data);
};
var options = {
serviceUrl: '${pageContext.request.contextPath}/TCustomer/getAllCustomer.koala',//获取数据的后台页面
onSelect: onAutocompleteSelect,//选中之后的回调函数
extraParams: {selectedCustomerName:$.trim($("#selectedCustomerName").val())},//动态参数值
paramName: "selectedCustomerName",
noCache: false, //是否启用缓存 默认是开启缓存的
max:10,
autoFill:false
};
$('#selectedCustomerName').autocomplete(options);
});
这样我们就可以把填入输入框的值作为extraParams动态参数传递到后台去，后台直接request.getParameter("selectedCustomerName");就可以了。
值得注意的是，后台应该返回什么样的数据格式，这个插件需要注意的地方就是这块了，如果不是他要求的格式的话，页面会报js错误的，要求的数据格式必须是这样的json串：
{"query":"A","suggestions":[{"data":"114e69b4-87a9-4c2b-aed4-1727568a92a7","value":"AAA111"},{"data":"531b59ca-8618-48f4-a6e8-963320e10159","value":"小人物_Amor"}]}
query后面的A是我输入框传入的参数，根据A模糊查询出两组数据，并以json的格式放在key为suggestions里。
后台代码：
@ResponseBody
@RequestMapping("/getAllCustomer")
public Object getAllCustomer(HttpServletRequest request,HttpServletResponse response)throws IOException{
List<Object> queryCustomerList = new ArrayList<Object>();
List<TCustomerDTO> allCustomer = new ArrayList<TCustomerDTO>();
//获取前台带过来的动态参数
String selectedCustomerName = request.getParameter("selectedCustomerName");
//得到包含selectedCustomerName参数的对象
allCustomer = tCustomerApplication.findAllTCustomer();
for (Iterator iterator = allCustomer.iterator(); iterator.hasNext();) {
TCustomerDTO tCustomerDTO = (TCustomerDTO) iterator.next();
if(tCustomerDTO.getName().contains(selectedCustomerName)){
Map<String, Object> result = new HashMap<String, Object>();
result.put("value", tCustomerDTO.getName());
result.put("data", tCustomerDTO.getId());
queryCustomerList.add(result);
}
}
//构造规定的json数据格式
Map<String, Object> query_result = new HashMap<String, Object>();
Object json = JSONArray.toJSON(queryCustomerList);
query_result.put("query", selectedCustomerName);
query_result.put("suggestions", json);
Object json_map = JSONArray.toJSON(query_result);
System.out.println(json_map);
return json_map;
}
OK了，其实很简单，当然你需要引入jquery，以及他所要求的其他两个js文件，各位下载源码后看示例就知道啦~
posted on 2014-05-22 18:11
小人物_Amor 阅读(1382)
评论(0) 编辑 收藏 所属分类:
web