上一篇: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中的另外的数据例如courseIdcourseName,而tokenInput("get")默认获取的时json中的idname,在初始化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")获取到了courseIdcourseName`的值,效果如下图所示:

03-05 23:48