JQuery tokeninput输入提醒插件猎取JSON数据

2019年8月30日 161次阅读 来源: 北堂棣

上一篇：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`的值，结果以下图所示：
《JQuery tokeninput输入提醒插件猎取JSON数据》

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).

    原文作者：北堂棣
    原文地址: https://segmentfault.com/a/1190000004920748
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞