Создать новые теги выбора select2 в локальной базе данных в экспресс - PullRequest
Новая
       17

Создать новые теги выбора select2 в локальной базе данных в экспресс

6 голосов
/ 15 марта 2019

Я использую select2 в приложении Express, чтобы создать поле ввода, в котором пользователи могут выбирать предметы из списка, и могут обновлять этот список с помощью любых вновь добавленных опций . * 1005.*

С чем я борюсь, так это с тем, что select2 работает на стороне клиента, тогда как любые данные, которые я использую для заполнения моих тегов <option> (к которым я хочу добавить новые опции), относятся к стороне сервера.

Я хочу, чтобы пользователи могли добавлять темы, которых нет в исходном списке, , чтобы будущие пользователи были представлены с новыми добавленными опциями (а также с оригинальными)

Вот варианты, которые я рассмотрел для достижения этой цели (повышения желательности):

  • Добавление новых <option>Subject</option> html-тегов для каждого добавленного тега
  • Вставка новых теговв массив и заполнить <option> s из этого массива
  • Заполнить <option> из json объекта и обновить этот объект при создании тега
  • Заполнить <option>из внешней базы данных (например, mongoose) и обновите ее при создании тега

Насколько я вижу, все эти опции требуют, чтобы мой клиентский код (select2-js) общался с серверным кодом (где мой массив, .json файл или mongoose схема были бы) и Я понятия не имею, как это сделать .

В моем текущем подходе я пытаюсь указать "локальный" json файл в качестве источника данных при моем вызове select2 ( см. Здесь ).Однако это не заполняет базу данных какими-либо опциями, так что это не работает, как я ожидал.

Затем я проверяю, существует ли каждый новый тег в массиве (dataBase), и добавляю его в базу данных, если нет: 

// 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
};

Однако этот подход добавляет новые тегив массив, который уничтожается при обновлении страницы, и новые теги не сохраняются.

Как я могу изменить это для загрузки данных на стороне сервера (json, mongoose документ или что-то ещееще, что считается наилучшей практикой), и обновить эти данные с помощью новых добавленных параметров (которые проходят мои тесты)?

Ответы [ 3 ]

5 голосов
/ 18 марта 2019

На вашей стороне сервера вы можете иметь API, который поддерживает и возвращает массив тегов.Если вы хотите, чтобы массив сохранялся даже после выключения сервера, вы можете сохранить массив тегов в базе данных.

Сторона сервера: 

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

Сторона клиента: 

$(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
};
5 голосов
/ 16 марта 2019

Для этого вы можете использовать select2:select и select2:unselect событие. 

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>
0 голосов
/ 25 марта 2019

Вот что я закончил (благодаря обоим ответам):

1.Настройте базу данных Mongoose для хранения предметов:

models/subjects.js

var mongoose = require("mongoose");

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

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

2.Настройте маршруты API в узле 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.Настройте поле ввода select2:
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
    }

});

Это работает, но я хотел бы услышать отзывы об этом подходе!

...