kendoUI之kendoAutoComplete实例

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"...}