天道酬勤,学无止境

Write new select2 option tags to local database in express

I am using select2 in an express app to make an input box where users can select subjects from a list, and can update this list with any newly added options.

The thing I'm struggling with is that select2 runs client-side, whereas any data I use to seed my <option> tags (that I want to append new options to) is server-side.

I want users to be able to add subjects that don't exist in the original list, so that future users will be presented with newly added options (as well as the original ones)

These are the options I've considered for achieving this (in increasing desirability):

  • Add new <option>Subject</option> html tags for each added tag
  • Push new tags to an array, and seed the <option>s from this array
  • Seed the <option> from a json object, and update this object on tag creation
  • Seed the <option> from an external database (e.g. mongoose), and update this on tag creation

As far as I can see, all of these options require that my client-side code (select2-js) talks to server-side code (where my array, .json file or mongoose schema would be), and I have no idea how to go about doing this.

In my current approach I am attempting to to specify a "local" json file as my data source in my select2 call (see here). However, this doesn't seed the database with any options, so this isn't working as I expected.

I then check if each new tag exists in an array (dataBase), and add it to the database if not:

// Data to seed initial tags:
var dataBase = [
    { id: 0, text: 'Maths'},
    { id: 1, text: 'English'},
    { id: 2, text: 'Biology'},
    { id: 3, text: 'Chemistry'},
    { id: 4, text: 'Geography'}
];


$(document).ready(function() {
    $('.select2-container').select2({
        ajax: {
            url: '../../subjects.json',
            dataType: 'json',
        },
        width: 'style',
        multiple: true,
        tags: true,
        createTag: function (tag) {
            var isNew = false;
            tag.term = tag.term.toLowerCase();
            console.log(tag.term);
            if(!search(tag.term, dataBase)){
                if(confirm("Are you sure you want to add this tag:" + tag.term)){
                    dataBase.push({id:dataBase.length+1, text: tag.term});
                    isNew = true;
                }
            }
            return {
                        id: tag.term,
                        text: tag.term,
                        isNew : isNew
                    };
        },
        tokenSeparators: [',', '.']
    })
});

// Is tag in database?
function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].text.toLowerCase() === nameKey.toLowerCase()) {
            return true
        }
    }
    return false
};

However, this approach will add the new tags to an array that is destroyed once I refresh the page, and new tags are not stored.

How can I modify this to load server-side data (json, mongoose document or anything else that is considered a best practice), and update this data with newly added options (that pass my tests)?

评论

On your server-side, you can have an api that maintains and returns the tag array. If you want the array to persist even after server shutdown, you can store the tags array in a database.

Server side:

let dataBase = [
{ id: 0, text: 'Maths'},
{ id: 1, text: 'English'},
{ id: 2, text: 'Biology'},
{ id: 3, text: 'Chemistry'},
{ id: 4, text: 'Geography'}
];
//Assuming you have a nodejs-express backend
app.get('/tags', (req,res) => {
res.status(200).send({tags: dataBase});
} );

Client Side:

$(document).ready(function() {
dataBase=[];
$.get("YOUR_SERVER_ADDRESS/tags", function(data, status){
console.log("Data: " + data + "\nStatus: " + status);
dataBase = data;
});

$('.select2-container').select2({
    data: dataBase,
    placeholder: 'Start typing to add subjects...',
    width: 'style',
    multiple: true,
    tags: true,
    createTag: function (tag) {
        var isNew = false;
        tag.term = tag.term.toLowerCase();
        console.log(tag.term);
        if(!search(tag.term, dataBase)){
            if(confirm("Are you sure you want to add this tag:" + tag.term)){
                dataBase.push({id:dataBase.length+1, text: tag.term});
                isNew = true;
                //Update the tags array server side through a post request
            }
        }
        return {
                    id: tag.term,
                    text: tag.term,
                    isNew : isNew
                };
    },
    tokenSeparators: [',', '.']
})
});

// Is tag in database?
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
    if (myArray[i].text.toLowerCase() === nameKey.toLowerCase()) {
        return true
    }
}
return false
};

You can use select2:select and select2:unselect event for this.

var dataBase = [{
    id: 0,
    text: 'Maths'
  },
  {
    id: 1,
    text: 'English'
  },
  {
    id: 2,
    text: 'Biology'
  },
  {
    id: 3,
    text: 'Chemistry'
  },
  {
    id: 4,
    text: 'Geography'
  }
];

$(document).ready(function() {
  $('.select2-container').select2({
    data: dataBase,
    placeholder: 'Start typing to add subjects...',
    width: 'style',
    multiple: true,
    tags: true,
    createTag: function(tag) {
      return {
        id: tag.term,
        text: tag.term,
        isNew: true
      };
    },
    tokenSeparators: [',', '.']
  })
  $(document).on("select2:select select2:unselect", '.select2-container', function(e) {
    var allSelected = $('.select2-container').val();
    console.log('All selected ' + allSelected);

    var lastModified = e.params.data.id;
    console.log('Last Modified ' + lastModified);

    var dbIdArray = dataBase.map((i) => i.id.toString());
    var allTagged = $('.select2-container').val().filter((i) => !(dbIdArray.indexOf(i) > -1))
    console.log('All Tagged ' + allTagged);
  });
});
.select2-container {
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select class="select2-container"></select>

Here's what I've ended up with (thanks to both answers):

1. Set up a Mongoose DB to hold subjects:

models/subjects.js

var mongoose = require("mongoose");

var SubjectSchema = new mongoose.Schema({
    subject: { type: String },
});

module.exports = mongoose.model("Subjects", SubjectSchema);

2. Set up api routes in node js express backend:
routes/api.js

var express    = require("express");
var router = express.Router();
var Subjects = require("../models/subjects");

// GET route for all subjects in db
router.get("/api/subjects/all", function(req, res){
    Subjects.find().lean().exec(function (err, subjects) {
        return res.send(JSON.stringify(subjects));
    })
});

// POST route for each added subject tag
router.post("/api/subjects/save", function(req, res){
    var newSubject = {};
    newSubject.subject = req.body.subject;

    console.log("Updating db with:" + newSubject);

    var query = {subject: req.body.subject};

    var options = { upsert: true, new: true, setDefaultsOnInsert: true };

    // Find the document
    Subjects.findOneAndUpdate(query, options, function(error, subject) {
        if (error) return;
        console.log("Updated db enry: " + subject);
    });

    return res.send(newSubject);
});

3. Set up select2 input field:
public/js/select2.js

var dataBase=[];
$(document).ready(function() {
    // Get all subjects from api (populated in step 2) and push to dataBase array
    $.getJSON('/api/subjects/all')
    .done(function(response) {
        $.each(response, function(i, subject){
            dataBase.push({id: subject._id, text: subject.subject});
        })
        console.log("dataBase: " + dataBase);
    })
    .fail(function(err){
        console.log("$.getJSON('/api/subjects/all') failed")
    })

    // Get data from api, and on 'selecting' a subject (.on("select2:select"), check if it's in the dataBase. If it is, or the user confirms they want to add it to the database, send it to POST route, and save it to our Subjects db.

    $('.select2-container')
    .select2({
        ajax: {
        url : "/api/subjects/all",
        dataType: 'json',
        processResults: function (data) {
            return {
                results: $.map(data, function(obj) {
                    return { id: obj._id, text: obj.subject };
                    })
                };
            }
        },
        placeholder: 'Start typing to add subjects...',
        width: 'style',
        maximumSelectionLength: 5,
        multiple: true,

        createTag: function(tag) {
            return {
                id: tag.term,
                text: tag.term.toLowerCase(),
                isNew : true
            };
        },

        tags: true,
        tokenSeparators: [',', '.']
    })
    .on("select2:select", function(e) {
        if(addSubject(dataBase, e.params.data.text)){
            console.log(e.params.data.text + " has been approved for POST");
            ajaxPost(e.params.data.text)
        } else {
            console.log(e.params.data.text + " has been rejected");
            var tags = $('#selectSubject select').val();
            var i = tags.indexOf(e.params.data.text);
            console.log("Tags: " + tags);
            if (i >= 0) {
                tags.splice(i, 1);
                console.log("post splice: " + tags);
                $('select').val(tags).trigger('change.select2');
            }
        }
    })

    function ajaxPost(subject){
        console.log("In ajaxPost");
        var formData = {subject : subject}
        $.ajax({
            type : "POST",
            contentType : "application/json",
            url : "/api/subjects/save",
            data : JSON.stringify(formData),
            dataType : 'json'})
            .done(console.log("Done posting " + JSON.stringify(formData)))
            .fail(function(e) {
                alert("Error!")
                console.log("ERROR: ", e);
            });
    }

    function addSubject(subjects, input) {
        if (!input || input.length < 3) return false

        var allSubjects = [];

        $.each(subjects, function(i, subject){
            if(subject.text) allSubjects.push(subject.text.toLowerCase())
        });

        console.log("Here is the entered subject: " + input);

        if(allSubjects.includes(input)){
            console.log(input + " already exists")
            return true
        }

        if(confirm("Are you sure you want to add this new subject " + input + "?")){
            console.log(input + " is going to be added to the database");
            return true
        } 
        console.log(input + " will NOT to added to the database");
        return false
    }

});

This works, but I would love to hear feedback on this approach!

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 向使用AJAX的jQuery Select2控件动态添加项目(Dynamically add item to jQuery Select2 control that uses AJAX)
    问题 我有一个使用AJAX填充的jQuery Select2控件: <input type="text" name="select2" id="select2" style='width:400px' value="999"> var initialSelection = { id: '999', text:"Some initial option"}; $("#select2").select2({ placeholder: "Select Option", minimumInputLength: 2, ajax: { url: "/servletToGetMyData", dataType: 'json', data: function (term, page) { return { term: term }; }, results: function (data, page) { return { results: data.results} } }, initSelection : function(element, callback){ callback(initialSelection); }, escapeMarkup: function (m) { return m; } }); AJAX链接到可能选项的数据库,如您所见,需要输入两个字符。 问题在于
  • I can't get multiple selected values of select box in php
    So, I have an HTML/PHP form that has a select list box from which you can select multiple values because its multiple properties are set to multiple. Consider the form method is 'POST'. But the list box is saving only one value when I click on SUBMIT (to be specific the last value chosen). I don't know why. This is part of my code: <?php if(isset($_POST['submitSave'])) { // Disable errors due to empty xml files error_reporting(E_ALL & ~E_WARNING); $domDoc = new DOMDocument('1.0', 'UTF-8'); $domDoc->preserveWhiteSpace = false; $domDoc->formatOutput = true; $domDoc->encoding = 'UTF-8'; $domDoc-
  • JavaScript
    5.JavaScript ECMAScript:客户端脚本语言的标准,且JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM) 5.1.基本语法 5.1.1.与html结合方式 内部JS: 定义<script>,标签体内容就是js代码 外部JS: 定义<script>,通过src属性引入外部的js文件 <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。且<script>可以定义多个。 5.1.2.注释 单行注释://注释内容多行注释:/*注释内容*/ 5.1.3.数据类型: 原始数据类型(基本数据类型): number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)string:字符串。 字符串 “abc” “a” ‘abc’boolean:true 和 falsenull:一个对象为空的占位符undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined 引用数据类型:对象 5.1.4.变量 变量:一小块存储数据的内存空间Java语言是强类型语言,而JavaScript是弱类型语言。强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型
  • Select2下拉菜单,但允许用户使用新值吗?(Select2 dropdown but allow new values by user?)
    问题 我想要一个包含一组值的下拉菜单,但还允许用户“选择”未在此处列出的新值。 我看到如果您在tags模式下使用select2,则select2支持此功能,但是有没有不使用标签的方法呢? 回答1 对于版本4+,请在下面通过Kevin Brown查看此答案 在Select2 3.5.2及更低版本中,您可以使用类似以下内容的东西: $(selector).select2({ minimumInputLength:1, "ajax": { data:function (term, page) { return { term:term, page:page }; }, dataType:"json", quietMillis:100, results: function (data, page) { return {results: data.results}; }, "url": url }, id: function(object) { return object.text; }, //Allow manually entered text in drop down. createSearchChoice:function(term, data) { if ( $(data).filter( function() { return this.text.localeCompare
  • 如何在Select2框架中将占位符用作默认值(How to use placeholder as default value in select2 framework)
    问题 为了获得select2的选定值,我正在使用: var x = $("#select").select2('data'); var select_choice = x.text 问题是,如果没有选择值,这将引发错误,我想知道是否有任何方法可以使它在未选择任何选项的情况下返回占位符 回答1 您必须添加一个空选项(即<option></option> )作为第一个元素,才能看到占位符。 从Select2官方文档中: “请注意,因为浏览器假定在非多值选择框中选择了第一个选项元素,所以必须提供一个空的第一个选项元素( <option></option> ),以使占位符起作用。” 希望这可以帮助。 例子: <select id="countries"> <option></option> <option value="1">Germany</option> <option value="2">France</option> <option value="3">Spain</option> </select> 而Javascript将是: $('#countries').select2({ placeholder: "Please select a country" }); 回答2 将其放在脚本文件中: $('select').select2({
  • 自动完成并在文本框闪亮的多个值中选择(Auto complete and selection of multiple values in text box shiny)
    问题 是否可以使用类似于Google搜索的自动完成字符串来选择多个值,并在闪亮的文本框中选择堆栈溢出标签。 dataset<-cbind("John Doe","Ash","Ajay sharma","Ken Chong","Will Smith","Neo"....etc) 我想从上面的数据集中选择多个变量作为自动填充到我的文本框中,然后将其传递给我的服务器。 用户界面 shinyUI(fluidPage( titlePanel("test"), sidebarLayout( sidebarPanel( helpText("text"), textInput("txt","Enter the text",""), #Pass the dataset here for auto complete ), mainPanel( tabsetPanel(type="tab",tabPanel("Summary"),textOutput("text2")) ) ) )) 服务器 # server.R shinyServer(function(input, output) { output$text2<- renderText({ paste("hello",input$txt) }) } ) 已编辑 我已经使用了Shinysky的select2input来选择多个varialbes
  • jquery select2: Uncaught query function not defined for Select2 tags
    I am using select2 plugin ver 3.5. It is working fine on php file. I am able to select value and able to save them in database. Scenario User save the data and after some time he/she wants to update/modify the data. then previously selected value should appear in the form. I am using Ajax to retrieve the data from database and it is working fine. Issue is i am not able to show selected data in select2 plugin. I searched on SO and found few relevant questions but i am not able to understand how to use them in my scenario $("#autofill").change(function() { var data1= $('option:selected', this)
  • jquery select2:未为 Select2 标签定义未捕获的查询函数(jquery select2: Uncaught query function not defined for Select2 tags)
    问题 我正在使用 3.5 版的 select2 插件。 它在 php 文件上运行良好。 我能够选择值并将它们保存在数据库中。 设想 用户保存数据,一段时间后他/她想要更新/修改数据。 那么先前选择的值应该出现在表单中。 我正在使用 Ajax 从数据库中检索数据,并且工作正常。 问题是我无法在 select2 插件中显示选定的数据。 我搜索了 SO 并发现了一些相关问题,但我无法理解如何在我的场景中使用它们 $("#autofill").change(function() { var data1= $('option:selected', this).text(); $.ajax({ //type: 'post', type: "GET", url:"autofill.php", cache: false, // dataType: 'json', data: 'action1=' + data1, success: function(data) { data = JSON.parse( data ); var keywordArray=data.keywords; $('#tags').select2().select2('val', keywordArray) 但是由于某种原因$('#tags').select2().select2('val', keywordArray
  • 如何将select2与webpack一起使用?(How can I using select2 with webpack?)
    问题 我正在使用webpack来管理我的所有资产,当我使用此代码要求select2(https://github.com/select2/select2)时,出现了错误 $(...)。select2不起作用。 require.ensure(['./vendors/select2'],function (require) { require('./site'); }); // site.js (function ($) { $(document).ready(function () { $(".js-1example-basic-single").select2(); }); })(jQuery); 我认为模块导出有问题。 我尝试了很多搜索,但没有希望。 任何人都请告诉我该怎么办,这花了我大约10个小时。 谢谢! 回答1 您可以通过以下方式运行select2 : import $ from 'jquery'; import 'select2'; // globally assign select2 fn to $ element import 'select2/dist/css/select2.css'; // optional if you have css loader $(() => { $('.select2-enable').select2(); }); 回答2
  • 如何在下拉列表中显示所选项目?(How to display selected item at drop down list?)
    问题 我目前正在处理带有下拉列表的编辑表单。 我有一个显示数据库中当前项目的编辑表单。 但我不知道我的下拉菜单如何显示匹配下拉列表的数据库中的当前值。 我知道我的解释有点混乱,因此我下面的图片将显示更好的解释。 这是我显示下拉菜单的编辑表单之一。 我想要的是用这个下拉菜单视图显示数据库值。 例子 : 我的数据库值为Pending 。 然后它将在下拉菜单的这个视图中显示Pending 。 当我点击下拉菜单时,它会显示如下图: 这就是我要找的。 下面是我试过的代码。 <div class="floatleft"> <select name="select2" class="select-form-standard" > <option value="0" id="0" name="status">Deleted</option> <option value="1" id="1" name="status">Active</option> <option value="2" id="2" name="status">Pending</option> <option value="2" id="2" name="status">Suspended</option> </select> </div> 但我只知道如何设计下拉菜单,不知道如何像这样工作。 我正在使用 smarty 框架。
  • 在 select2 上设置标签值(Set tag value on select2)
    问题 我的页面上有选择字段: <label> <span>Select name</span> <select name="name"> <option value="Option1">Option 1</option> <option value="Option2">Option 2</option> </select> </label> 我已经为这个字段初始化了 select2 lib: $("[name='name']").select2({ allowClear: true, tags: true }); 如您所见,我需要使用标签,因为用户可以编写一个选项,但不包含在建议中。 它有效。 当我想设置默认用户值时,我使用以下命令: $("[name='name']").val(Option1).trigger("change"); 如果该值是选择选项值之一,则它有效。 但是如果我想设置其他值,标签不会设置。 $("[name='name']").val(Option3).trigger("change"); 我可以做什么来设置标签值? 回答1 好的,我找到了答案! 如果我们没有带有标签值的选项,我们只需执行以下操作: var tagValue = [{id: Option3, text: Option3}]; $("[name='name']").select2({
  • jQuery select2获取选择标签的值?(jQuery select2 get value of select tag?)
    问题 朋友您好,这是我的代码: <select id='first'> <option value='1'> First </option> <option value='2'> Second </option> <option value='3'> Three </option> </select> 这是我的select2代码: $("#first").select2(); 下面是获取选定值的代码。 $("#first").select2('val'); // It returns first,second,three. 这是返回诸如first,second,three类的文本,我想得到1,2,3 。 意味着我需要选择框的值,而不是文本。 回答1 $("#first").val(); // this will give you value of selected element. i.e. 1,2,3. 回答2 要获取Select元素,可以使用$('#first').val(); 要获取选定值的文本- $('#first :selected').text(); 您能发布您的select2()函数代码吗 回答3 $("#first").select2('data')将所有数据作为地图返回 回答4 如果您使用的是ajax ,则可能希望在选择之后立即获得select的更新值。 /
  • 无法在Select2中设置多个值(Can't set multiple values in Select2)
    问题 我正在尝试在select2-jquery组件中显示选定的值。 var select = $(".select2").select2({ multiple: true, placeholder: "", width:'100%', data: z }); var selectedValues = $("#sourceValues").val().split(','); $.each( selectedValues, function(k,v){ $(".select2").select2('val',v); }) 元素sourceValues包含值,例如:2,4和z是对象数组,按建议包含id和text。 我可以看到链接到Select2元素的<options> ,但是我无法在该元素上显示所选的值。 另外,如果我尝试在Chrome控制台上运行查询,并且我编写类似; $(".select2").select2('val',4) 因此, <option> ID为4的<option> 。 回答1 更新(Select2 4.0+) 从4.0版开始,您应该使用.val(...)然后使用.val(...)的trigger('change') 。 https://select2.org/programmatic-control/add-select-clear-items#selecting
  • Set tag value on select2
    I have select field on my page: <label> <span>Select name</span> <select name="name"> <option value="Option1">Option 1</option> <option value="Option2">Option 2</option> </select> </label> And I have initialized select2 lib for this field: $("[name='name']").select2({ allowClear: true, tags: true }); As you can see I need to use tags because user can write an option, not included in the proposed. And it works. When I want to set the default user value I use this command: $("[name='name']").val(Option1).trigger("change"); And it works if the value is one of the select options values. But if I
  • 如何在没有Ajax的情况下在select2 4.0中启用无限滚动(How to enable infinite scrolling in select2 4.0 without ajax)
    问题 我正在将select2与自定义数据适配器一起使用。 提供给select2所有数据都是在Web本地生成的(因此无需使用Ajax)。 由于query方法可以生成很多结果(大约5k),因此打开选择框非常慢。 作为一种补救措施,我想使用无限滚动。 自定义数据适配器文档中说, query方法应该接受page一起使用的参数term : @param params.page应该加载的特定页面。 通常在使用远程数据集时提供此功能,该数据集依赖于分页来确定应显示哪些对象。 但事实并非如此:只有term存在。 我尝试返回more: true或more: 1000 ,但这没有帮助。 我猜这是因为,默认情况下,如果启用了ajax,则启用了无限滚动。 我猜想启用无限滚动将涉及使用amd.require ,但是我不确定该怎么做。 我尝试了这段代码: $.fn.select2.amd.require( ["select2/utils", "select2/dropdown/infiniteScroll"], (Utils, InfiniteScroll) => input.data("select2").options.options.resultsAdapter = Utils.Decorate(input.data("select2").options.options.resultsAdapter
  • 如何从select2多选中的选项列表中删除所选选项并按选择顺序显示所选选项(How to remove selected option from the option list in select2 multiselect and show selected options in the order they are selected)
    问题 我的表单中有 select2 多选字段,我想在选择后从下拉列表中删除所选选项,如果它从列表中删除,则再次将其添加到列表中。 而且添加的项目应该与他们选择的顺序相同。 当前的 select2 (4.0) 没有删除选定的项目,而是按照它们在下拉列表中出现的顺序显示所选项目,而不是按照它们被选择的顺序。 $(document).ready(function(){ $('#dynamicAttributes').select2({ allowClear: true, minimumResultsForSearch: -1, width: 600 }); }); JSFiddle:https://jsfiddle.net/rd62bhbm/ 回答1 Q 的第 1 部分: 您可以使用CSS 技巧来隐藏selected item如下所示: .select2-results__option[aria-selected=true] { display: none; } 问的第 2 部分: 你也可以做一个JQuery 技巧来强制selected items到标签框的末尾, (通过在选择上获取选定的项目,分离它(删除它),然后将它重新附加到标签框,然后调用“更改函数”来应用更改) : $("select").on("select2:select", function (evt) { var
  • Problems Indenting HTML(5) with PHP
    Disclaimer: Please bare with the length of this question. This is a recurring question for a real world problem that I've seen asked hundreds of times with no clear, working solution ever being presented. I have hundreds of HTML files I want to mass indent using PHP. At first I thought of using Tidy but as you should know, it's not compatible by default with HTML5 tags and attributes, after some research and even more tests I came up with the following implementation that "fakes" HTML 5 support: function Tidy5($string, $options = null, $encoding = 'utf8') { $tags = array(); $default = array (
  • Select2 用于创建新标签的事件(Select2 Event for creating a new tag)
    问题 我正在使用 jQuery Select2 (v4) 插件作为标签选择器。 我想侦听何时在 select 元素中创建新标签并触发 ajax 请求以存储新标签。 我发现有createTag事件,但每次在 select2 元素中输入一个字母时,它似乎都会触发。 如我的小提琴所示:http://jsfiddle.net/3qkgagwk/1/ 是否有类似的事件仅在完成输入新标签时触发? 即它被一个灰色的盒子包围着。 回答1 不幸的是,我找不到任何本地方法。 但是,如果您对简单的“解决方法”感兴趣,也许这会让您更接近: $('.select2').select2({ tags: true, tokenSeparators: [",", " "], createTag: function (tag) { return { id: tag.term, text: tag.term, // add indicator: isNew : true }; } }).on("select2:select", function(e) { if(e.params.data.isNew){ // append the new option element prenamently: $(this).find('[value="'+e.params.data.id+'"]').replaceWith('
  • 如何防止从 select2 中删除标签(How to prevent deleting of tags from select2)
    问题 我创建了一个带有tags:true的 select2 小部件。 有没有办法通过单击下拉列表中的选定项目来防止删除标签,以便只能通过单击标签中的叉号来删除标签? 回答1 您可以使用事件select2:unselecting取消从项目中删除标签,例如 $(".js-example-tags").select2({ tags: true }).on("select2:unselecting", function (e) { // check if originalEvent.currentTarget.className is "select2-results__option" (in other words if it was raised by a item in the dropdown) if ($(e.params.args.originalEvent.currentTarget).hasClass("select2-results__option")){ e.preventDefault(); // close the dropdown $(".js-example-tags").select2().trigger("close"); } }); JSFiddle 演示 回答2 我发现存在一个选项调用locked ,我可以做到这一点。 只需在选项中添加选项locked=
  • 在select2中使用AJAX标记(Tagging with AJAX in select2)
    问题 我正在使用select2进行标记 我对select2有这些要求: 我需要使用select2 ajax搜索一些标签另外,我还需要在select2中使用“标签”,以允许不在列表中的值(Ajax结果)。 两种方案均独立工作。 但是仅将aJax值连接在一起。 如果我们键入列表中未包含的其他任何值,则显示“未找到匹配项” 我的方案如果用户键入列表中没有的任何新值,请允许他们组成自己的标签。 有什么办法可以使这项工作吗? 回答1 Select2具有功能“ createSearchChoice”: 根据用户的搜索词创建一个新的可选选项。 允许创建通过查询功能不可用的选项。 当用户可以动态创建选择时有用,例如用于“标记”用例。 您可以使用以下方法实现所需的功能: createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) { return {id:term, text:term}; } }, multiple: true 这是一个更完整的答案,可将JSON结果返回给ajax搜索,并允许从该术语创建标签(如果该术语未返回结果): $(".select2").select2({ tags