JQuery tokeninput輸入提示插件獲取JSON數據

上一篇：JQuery tokeninput 輸入提示 https://segmentfault.com/a/11...

接着上一篇的功能，繼續，仍是那個html、js。

獲取tokeninput中的數據，官網方法以下：

Methods
selector.tokenInput("get");
Gets the array of selected tokens from the tokeninput (each item being an object of the kind {id: x, name: y}).

恕在下才疏學淺，英文實在不會翻譯 -_-|||

具體使用，js代碼以下：

function addBookSetting(){
    var courseId = $('#token-courseId').tokenInput("get");
    $.each(courseId,function(i,item){
        $('#add-course').val(item.id);
    });
    
    var bookIds = []
    var  bookId = $('#token-bookId').tokenInput("get");
    $.each( bookId,function(i,item){
         bookIds.push(item.id);
    });
    $('#add-bookId').val(bookIds);
    if($("#token-input-token-courseId").parent('li').prev().html()!=null&&
            $("#token-input-token-bookId").parent('li').prev().html()!=null){
        var data = $('#book-setting-add-form').serialize();
        var url = "/server/course/book/add.json";
        $.getJSON(url,data,function(rtn){
        //作你想作的一些頁面操做
        //例如：
             alert("添加成功");//彈出添加成功
             $('#modal-book-setting-add').modal('hide');//添加框消失
             book_setting_list(0);//頁面列表刷新
         });
    }if($("#token-input-token-courseId").parent('li').prev().html()==null){
        alert("課程名稱不能爲空");
    }if($("#token-input-token-bookId").parent('li').prev().html()==null){
        alert("教材名稱不能爲空");
    }
}

補充:
最近用到tokenInput("get")要獲取json中的另外的數據例如courseId和courseName，而tokenInput("get")默認獲取的時json中的id和name,在初始化tokenInput時可經過設置tokenValue:'courseId'和propertyToSearch:'courseName'改變tokenInput("get")獲取到的object,可是設置後發現，能夠獲取到是id和courseName卻仍然不能獲取到courseId。

經過Support for use of custom "tokenValue" field 這篇文章，修改了jquery.tokeninput.js插件源碼後，才使得設置tokenValue支持用戶自定義的值。修改插件源碼後，再次初始化tokenInput設置tokenValue:'courseId'和propertyToSearch:'courseName'，代碼以下：

$("#token-course").tokenInput("/course/list.json?classId="+classId+"&termId="+termId,{
            tokenValue: "courseId",
            theme: "facebook",
            hintText: "請輸入課程名稱",
            noResultsText: "沒有相關信息",
            searchingText: "搜索中...",
            preventDuplicates: true,
            propertyToSearch : "courseName",
            queryParam: "courseNameLike",
});

而後tokenInput("get")獲取到了courseId和courseName`的值，效果以下圖所示：

tokenValue
The value of the token input when the input is submitted. Set it to id in order to get a concatenation of token IDs, or to name in order to get a concatenation of names. default: id

propertyToSearch
The javascript/json object attribute to search. default: 「name」 (demo).