JQuery tokeninput输入提示插件获取JSON数据

LeexMuller 发布于2019-08-19 18:06 / 3410人阅读

摘要：上一篇输入提示接着上一篇的功能，继续，还是那个。修改插件源码后，再次初始化设置和，代码如下请输入课程名称没有相关信息搜索中然后获取到了和的值，效果如下图所示

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

云服务器 GPU云服务器 jquery提示插件 jquery输入框插件提示输入框 js获取input输入数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79199.html

前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

codercao 2019-08-19 18:10 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

huayeluoliuhen 2019-08-01 15:13 评论0 收藏0
JQuery tokeninput 输入提示

摘要：简介简介输入提示自动完成插件，类似搜索的自动完成的功能，例如，撰写文章提问时添加标签的时候下拉框自动的提示。官网使用下载文件在官网下载相关的文件将这些文件放入项目中，本人习惯性放入项目的目录下。简介简介：输入提示自动完成插件，类似google搜索的自动完成的功能，例如，segmentfault撰写文章、提问时添加标签的时候下拉框自动的提示。官网：http://loopj.com/j...

时飞 2019-08-19 18:05 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0