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