Select2: создание тегов с помощью ajax - PullRequest
Новая
       69

Select2: создание тегов с помощью ajax

0 голосов
/ 15 октября 2019

Я использую библиотеку select2.

Мой элемент select2 может выполнять поиск в базе данных по каждому тегу через ajax, и это прекрасно работает.

Моя проблема в том, что я хочу, чтобы пользователь такжебыть в состоянии создать новый тег. Глядя на их документацию, я должен использовать опцию createTag;однако, это срабатывает, как только я нажимаю на элемент и при каждом нажатии клавиши.

Может ли кто-нибудь дать какие-либо рекомендации о том, как мне достичь своей цели?

вот мой код на данный момент 

I am using ajax top search for tags but I would also like to create new tags to the database. I have tried doing this via createTag but this seems to be firing as soon as I click in the HTML element and on each key press.

Here is my code:

              $('.tags').select2({
              tags: true,
              placeholder: "These tags will apply to all lines",
              tokenSeparators: [','],
              ajax: {
                  url: '/api/tags/find',
                  dataType: 'json',
                  data: function (params) {
                      return {
                          q: $.trim(params.term)
                      };
                  },
                  processResults: function (data) {
                    return {
                        results: data
                    }
                  },
                  cache: true,
              },
              createTag: function(params) {
                  alert('tag created') // This is were I would put my ajax POST. 
              }
          });

1 Ответ

0 голосов
/ 15 октября 2019

После прочтения документации снова я вижу, что должен был использовать события https://select2.org/programmatic-control/events

Я использовал опцию createTag, чтобы назначить newTag: true для вновь созданных тегов, и использовал select2:selectedсобытие, которое проверяло, был ли выбран новый тег, и, если это так, отправляло ajax-запрос на сервер для создания этого тега. 


          $('.tags').select2({
              tags: true,
              placeholder: "These tags will apply to all lines",
              minimumInputLength: 3,
              tokenSeparators: [','],
              ajax: {
                  url: '/api/tags/find',
                  dataType: 'json',
                  data: function (params) {
                      return {
                          q: $.trim(params.term)
                      };
                  },
                  processResults: function (data) {
                    return {
                        results: data
                    }
                  },
                  // cache: true,
              },
              createTag: function(params) {
                  let term = $.trim(params.term);
                  if (term.length < 3)
                  {
                      return null
                  }

                  return {
                      id: term,
                      text: term,
                      newTag: true,
                  }
              },
          });

          $('.tags').on('select2:select', function (e) {
              let tag = e.params.data;
              if (tag.newTag === true)
              {
                  axios.post('/api/newtag', {
                      name: tag.text,
                      type: 'default',
                  })
              }
          });
...