kendo UI是前端的一个框架,有很强大的功能.但是对于后台开发的java工程师来说,kendoUI中的很多属性以及属性的含义是不清楚的.相信大家都会面向百度,遇到什么搜什么,但是
对于向学习kendoUI的同学来说这种方式就不可取了(根本不知道搜什么)
在这里向大家推荐一个kendo UI学习网站kendoAutoComplete 的属性介绍http://www.scscms.com/html/article/20131025-autocomplete.html
一.需求
autocomplete自动补齐:作用是自定义一些常用词组绑定输入框,当别人输入字符时自动匹配对应的词组生成下拉菜单以供用户选择.一方面可以提高输入效率,另一方面也可以减少出错.
需求如下:
1.国家自动补全,在选择下拉框中的国家的同时时,隐藏一个对应的国家Code(国家的唯一标识),方便参数的提交.
二.思路
1.使用kendoAutoComplete实现自动补全.
2.数据:kendoAutoComplete的数据从后台请求获取.
3.页面的展示:选择<span id="code">"countryName"</span>的形式作为下拉框中li标签的内容.
或者在li标签中隐藏input框,用来放国家代码.这么做是为了方便在下拉列表选择事件的函数中获取相应的国家code.
三.实现
前段代码:
html:
国家:<input type="text" name="visaCountryCn" id="country"/>
<input type="hidden" name="visaCountryCode" />
js:
$(function() {
initEnven();
});
function initEnven(){
initAutoCompleteCommon("input[name='visaCountryCn']","/autoComplete/operateNameAuto",{
dataTextField:'nameCn', //要匹配的字段,和后台的JourneyCountryBean的字段一致.
placeholder:"请输入国家", //默认在输入框中的内容,点击输入框则清空
template : '<span id="${data.code}">${data.nameCn}</span>', //显示模板,显示在下拉框中li标签中的模板
select: function(t){ //下拉框选择事件,还有打开事件(open) 关闭事件(close) 改变事件(change)
//t是当前选择的行对象,属性有很多在此不罗列了,有兴趣的同学可以使用for(var i in t){alert(i)}看一下
var userCode = $(t.item[0].children[0]).attr("id"); //t.item[0]是当前行,即li对象.$(t.item[0].children[0])表示li标签下的第一个元素,就是template中的<span>了
$("#userKey").val(userCode);
}
});
}
//自动补全方法
function initAutoCompleteCommon(inputSelector, dataUrl,options,dataParameter) {
var $input = null;
if (inputSelector instanceof jQuery) {
$input = inputSelector;
} else {
$input = $(inputSelector);
}
if(!$input) {
return;
}
var dataUrl = basepath + dataUrl;
var opts = $.extend({}, {
delay : 400,
placeholder: "请输入要查找内容...",
dataTextField : 'tourGroupMark',
filter: "contains",
dataSource : {
serverFiltering : true,
serverPaging : true,
pageSize : 10,
transport : {
read : {
dataType : "jsonp",
url : dataUrl,
data : dataParameter
}
}
}
}, options);
return $input.kendoAutoComplete(opts).data("kendoAutoComplete");
}
当然这个自动补全可以做的更智能,比如是否忽略大小写,是否默认补全第一行,鼠标移入需要显示更多信息...,想实现更多功能的大家可以去网上了解更多的相关属性.
java:
@Controller @RequestMapping(value = "/autoComplete") public class VisaProgressComplateController { @Resource private CountryService countryService; /** 签证-国家自动补全 */ @RequestMapping("visaCountryAuto") @ResponseBody public String searchJnCountry(@RequestParam("filter[filters][0][value]") String filter, @RequestParam("callback") String callback){ CountrySearchCriteria criteria = new CountrySearchCriteria(); criteria.setCountryName(filter); criteria.setOffset(0); criteria.setLimit(10);
List<JourneyCountryBean> countryBeans = countryService.searchSomeCountrys(criteria);return genJson(countryBeans, callback); } public <C> String genJson(List<C> data, String callback) { String json = JsonSerializers.serializeCollection(data); return StringUtils.isNotBlank(callback) ? callback + "(" + json + ")" : json; } }
public class JourneyCountryBean{
private String key; // required
private String code; // required
private String nameCn; // required
private String nameEn; // required
//set && get
}
后台获取数据并将数据按一定格式传到浏览器,在这里我用的是用一个bean来存储每行数据,当然也可以采用map以key-value的形式存放,用list来表示多行数据.
这些只是后台的表现形式,想要浏览器认识,在这里将list数据转化成json格式,转换后的数据应该是这样的:{"key":"data";"code":"data"..."key":"data";"code":"data"...}