JQuery tokeninput输入提示插件获取JSON数据-CSDN博客

上一篇：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).