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

LeexMuller 發布于2019-08-19 18:06 / 3412人閱讀

摘要：上一篇輸入提示接著上一篇的功能，繼續，還是那個。修改插件源碼后，再次初始化設置和，代碼如下請輸入課程名稱沒有相關信息搜索中然后獲取到了和的值，效果如下圖所示

上一篇：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輸入數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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