选择不显示以字符 Ñ

Question

我有一个包含多个选项的列表，但搜索未显示以 Ñ 字符开头的元素。如果这个字符位于字符串的中间，则没有问题。这里我复制我正在使用的代码，看看这里是否有问题。

function obtentores(element) {
  jQuery(element).selectize({
    options: [
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "CRONOX", value: "DON MARIO: TRIGO | CROÑOX" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "FUSTE", value: "DON MARIO: TRIGO | FUSTE" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "LENGA", value: "DON MARIO: TRIGO | LENGA" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "LENOX", value: "DON MARIO: TRIGO | LENOX" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "LYON", value: "DON MARIO: TRIGO | LYON" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "DMÑANDUBAY", value: "DON MARIO: TRIGO | ÑANDUBAY" },
    ],
    optionGroupRegister: function(optgroup) {
      var capitalised = optgroup.charAt(0).toUpperCase() + optgroup.substring(1);
      var group = {
        label: 'Obtentor: ' + capitalised
      };
      group[this.settings.optgroupValueField] = optgroup;
      return group;
    },
    render: {
      item: function(item, escape) {
        return (
          "<div>" +
            (item.variedad ? '<span class="name">' + escape(item.variedad) + "</span>" : "") +
          "</div>"
        );
      },
      option: function(item, escape) {
        var label = item.variedad;
        var caption = item.cultivo;
        return (
          "<div style='display: flex; justify-content: space-between; padding: 4px 8px'>" +
          "<span class='label'>" +
          escape(label) +
          "</span>" +
          (caption ?
            '<span class="caption">' + escape(caption) + "</span>" :
            "") +
          "</div>"
        );
      },
    },
    maxOptions: 100,
    placeholder: 'Ingrese su busqueda ...',
    optgroupField: 'obtentor',
    labelField: 'variedad',
    searchField: ['variedad', 'obtentor', 'cultivo'],
    sortField: 'variedad'
  });
}

我需要搜索在任何位置显示 Ñ 的结果。

Answer 1

您遇到的 Selectize 不显示以字符

Ñ

开头的结果的问题可能与搜索功能处理非 ASCII 字符的方式有关。这是一种处理此问题的方法，即使用自定义过滤功能来确保搜索包含以

Ñ

开头的选项。

这是带有自定义搜索过滤器的更新后的

obtentores

函数：

function obtentores(element) {
  jQuery(element).selectize({
    options: [
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "CRONOX", value: "DON MARIO: TRIGO | CROÑOX" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "FUSTE", value: "DON MARIO: TRIGO | FUSTE" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "LENGA", value: "DON MARIO: TRIGO | LENGA" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "LENOX", value: "DON MARIO: TRIGO | LENOX" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "LYON", value: "DON MARIO: TRIGO | LYON" },
      { obtentor: 'DON MARIO', cultivo: "TRIGO", variedad: "ÑANDUBAY", value: "DON MARIO: TRIGO | ÑANDUBAY" },
    ],
    optionGroupRegister: function(optgroup) {
      var capitalised = optgroup.charAt(0).toUpperCase() + optgroup.substring(1);
      var group = {
        label: 'Obtentor: ' + capitalised
      };
      group[this.settings.optgroupValueField] = optgroup;
      return group;
    },
    render: {
      item: function(item, escape) {
        return (
          "<div>" +
            (item.variedad ? '<span class="name">' + escape(item.variedad) + "</span>" : "") +
          "</div>"
        );
      },
      option: function(item, escape) {
        var label = item.variedad;
        var caption = item.cultivo;
        return (
          "<div style='display: flex; justify-content: space-between; padding: 4px 8px'>" +
          "<span class='label'>" +
          escape(label) +
          "</span>" +
          (caption ?
            '<span class="caption">' + escape(caption) + "</span>" :
            "") +
          "</div>"
        );
      },
    },
    maxOptions: 100,
    placeholder: 'Ingrese su busqueda ...',
    optgroupField: 'obtentor',
    labelField: 'variedad',
    searchField: ['variedad', 'obtentor', 'cultivo'],
    sortField: 'variedad',
    score: function(search) {
      return function(item) {
        var score = 0;
        if (item.variedad.toLowerCase().includes(search.toLowerCase())) {
          score += 1;
        }
        if (item.variedad.toLowerCase().startsWith(search.toLowerCase())) {
          score += 1;
        }
        return score;
      };
    }
  });
}

主要变化：

1. 自定义评分功能：添加了自定义

   score

   功能，以优先考虑以搜索词开头的匹配，并包含非 ASCII 字符，如

   Ñ

   。

此自定义评分功能将有助于确保以

Ñ

开头的选项包含在搜索结果中并按优先顺序排列。