JQuery tokeninput輸入提示插件獲取JSON數(shù)據(jù)

LeexMuller 發(fā)布于2019-08-19 18:06 / 3491人閱讀

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

上一篇：JQuery tokeninput 輸入提示 https://segmentfault.com/a/11...

接著上一篇的功能，繼續(xù)，還是那個(gè)html、js。

獲取tokeninput中的數(shù)據(jù)，官網(wǎng)方法如下：

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

恕在下才疏學(xué)淺，英文實(shí)在不會(huì)翻譯 -_-|||

具體使用，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){
        //做你想做的一些頁(yè)面操作
        //例如：
             alert("添加成功");//彈出添加成功
             $("#modal-book-setting-add").modal("hide");//添加框消失
             book_setting_list(0);//頁(yè)面列表刷新
         });
    }if($("#token-input-token-courseId").parent("li").prev().html()==null){
        alert("課程名稱不能為空");
    }if($("#token-input-token-bookId").parent("li").prev().html()==null){
        alert("教材名稱不能為空");
    }
}

補(bǔ)充:
最近用到tokenInput("get")要獲取json中的另外的數(shù)據(jù)例如courseId和courseName，而tokenInput("get")默認(rèn)獲取的時(shí)json中的id和name,在初始化tokenInput時(shí)可通過(guò)設(shè)置tokenValue:"courseId"和propertyToSearch:"courseName"改變tokenInput("get")獲取到的object,但是設(shè)置后發(fā)現(xiàn)，可以獲取到是id和courseName卻仍然不能獲取到courseId。

通過(guò)Support for use of custom "tokenValue" field 這篇文章，修改了jquery.tokeninput.js插件源碼后，才使得設(shè)置tokenValue支持用戶自定義的值。修改插件源碼后，再次初始化tokenInput設(shè)置tokenValue:"courseId"和propertyToSearch:"courseName"，代碼如下：

$("#token-course").tokenInput("/course/list.json?classId="+classId+"&termId="+termId,{
            tokenValue: "courseId",
            theme: "facebook",
            hintText: "請(qǐng)輸入課程名稱",
            noResultsText: "沒有相關(guān)信息",
            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).

云服務(wù)器 GPU云服務(wù)器 jquery提示插件 jquery輸入框插件提示輸入框 js獲取input輸入數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79199.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

LeexMuller

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow.example

閱讀 3348·2023-04-26 01:31
tensorflow.examples.tutorials

閱讀 1967·2023-04-25 22:08
寶塔面板Nginx通過(guò)User-Agent禁止爬蟲采集并返回炸彈

閱讀 3631·2021-09-01 11:42
這網(wǎng)站傻了嗎？這兩天老是點(diǎn)擊提問(wèn)，就彈回主頁(yè)....什么意思

閱讀 2893·2019-08-30 12:58
前端小姿勢(shì)

閱讀 2254·2019-08-29 18:31
【css】圣杯布局

閱讀 2495·2019-08-29 17:18
React結(jié)合webpack的具體使用

閱讀 3124·2019-08-29 13:01
前端webpack workflow（二）——Webpack基本使用

閱讀 2621·2019-08-28 18:22

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JQuery tokeninput輸入提示插件獲取JSON數(shù)據(jù)

相關(guān)文章

前端技術(shù) 博客文章、書籍積累

前端技術(shù) 博客文章、書籍積累

前端技術(shù) 博客文章、書籍積累