在 select2 中选择未知项目时显示项目请求表

Question

I would like to use select2 to show a company search.我想使用 select2 来显示公司搜索。 If the company the user is looking for is not in the current dataset we need to show a company request form to add the data.如果用户要查找的公司不在当前数据集中，我们需要显示公司请求表以添加数据。

html html

<head>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="company">
  <option value="1">(FB) Facebook</option>
  <option value="2">(AAPL) Apple</option>
  <option value="3">(NFLX) Netflix</option>
  <option value="4">(GOOG) Alphabet</option>
</select>
<form style="margin: 100px 0 0 0; display: none">
  <h2>
    Company not found
  </h2>
  <button>
    Add Company?
  </button>
</form>
</body>

javascript javascript

/**
 * Requrirements:
 * 1) indicate in dropdown that the user will be adding the company. Maybe by displaying "Add: GOOG"
 * 2) unhide company request form when a new company is selected.
 */
$(document).ready(function() {
  let elm = $('.js-example-basic-single');
  elm.select2({
    placeholder: "Company",
    tags: true,
    createTag: function(params) {
      console.log('createTag', params);
      return {
          id: params.term,
          text: params.term.toUpperCase()
      }
    },
    insertTag: function(data, tag) {
        tag.isTag = true;
        data.push(tag);
    },
  }).on("change:select", function(e) {
      console.log('select');
      var data = e.params.data;
      var requestForm = document.querySelector('form');
      if (data.isTag) {
          console.log('local tag selected', data);
          requestForm.style.display = 'block';
      } else {
          requestForm.style.display = 'none';
      }
  });
});

jsfiddle at https://jsfiddle.net/morenoh149/mf6Lxyc0/21/ any help appreciated jsfiddle 在https://jsfiddle.net/morenoh149/mf6Lxyc0/21/任何帮助表示赞赏

Answer 1

You are using change:select but that is not a select2 event .您正在使用change:select但这不是select2 event 。 The closest event to that is change.select2 but that is not what you want.最接近的事件是change.select2但这不是您想要的。 The event you want is select2:select , which occurs whenever a result is selected.您想要的事件是select2:select ，只要select2:select了结果就会发生。

Given your existing code, you've already set isTag to true so the rest of your code works as you expect:鉴于您现有的代码，您已经将isTag设置为true因此其余代码按您的预期工作：

}).on("select2:select", function(e) {
  console.log('select');
  var data = e.params.data;
  var requestForm = document.querySelector('form');
  if (data.isTag) {
    console.log('local tag selected', data);
    requestForm.style.display = 'block';
  } else {
    requestForm.style.display = 'none';
  }
});

在 select2 中选择未知项目时显示项目请求表

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-07 00:36:19

在 select2 中选择未知项目时显示项目请求表

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-07 00:36:19

解决方案1
1 已采纳 2020-11-07 00:36:19