Select2js 将 ajax 调用从用户输入中获得的结果分开

Question

我有一个 select2js select 字段，它根据用户对数据库的查询检索疾病列表。 select 的类型是标签，这样如果条目不在数据库中，用户可以添加自己的。它的外观示例如下所示：

以下选项由对本地 api 的 ajax 调用填充，以从数据库中检索疾病。

我们如何写：用户输入下方的“建议”或隐藏下拉菜单中的用户输入（如上所示“IgA ne”），以便更有可能引导用户从数据库？

一些示例代码：

HTML

<select id="diseases" class="form-control selectmultiple" name="diseases[]" multiple="multiple" aria-describedby="diseasesHelp">
</select>
<small id="diseasesHelp" class="form-text text-muted">If known to appear in certain diseases e.g. Tn syndrome</small>

JS

$('#diseases').select2({
  tags: true,
  placeholder: 'Select an item',
  minimumInputLength: 3,
  ajax: {
    url: '/diseaseSelector',
    dataType: 'json',
    delay: 250,
    processResults: function (data) {
      return {
        results: $.map(data, function (item) {
          return {
            text: item.name,
            id: item.id
          }
        })
      };
    },
  }
});

Answer 1

关于用户输入下方的“建议”，您可以使用Option Group。使用 Ajax，选项应该在选项组对象中，格式如下：

{
  "text": "Group Name",
  "children": [] // your options
}

所以，在你的情况下：

processResults: function (data) {
  return {
    results: [{
      text: "Suggestions",
      children: $.map(data, function (item) {
        return {
          text: item.name,
          id: item.id
        }
      })
    }]
  };
},

Select2js 将 ajax 调用从用户输入中获得的结果分开

Select2js separate results obtained by ajax call from user input

javascript

jquery-select2

jquery-select2-4