使用 Chosen.js 搜索国际字符

Question

有没有人找到使用 selected.js 搜索国际字符的解决方法？

例如，如果我有一个包含以下选项的多选字段： - 法国城堡 - 英国城堡

然后我搜索“Cha”

只有英文会显示。

Answer 1

我不知道，如果现在回答还不算太晚，但它可能对其他人有帮助。

关键是在比较期间从输入的字符串和匹配的选项字符串中去除变音符号。 我的修改是使用版本 1.1.0 中的 jquery Chosen 插件，从github 下载。

首先你必须有一个去掉变音符号的函数（我在 winnow_results() 之后添加了它）

// strip czech diacritics from string
AbstractChosen.prototype.strip_diacritics= function(string) {
  var 
    translationTable= [
      // input with diacritics - add your characters if necessary
      "éěÉĚřŘťŤžŽúÚůŮüÜíÍóÓáÁšŠďĎýÝčČňŇäÄĺĹľĽŕŔöÖ",
      // stripped output
      "eeEErRtTzZuUuUuUiIoOaAsSdDyYcCnNaAlLlLrRoO",
    ],
    output= '';

  // scan through whole string
  for (var i= 0; i < string.length; i++) {
    var charPosition= translationTable[0].indexOf(string[i]);
    output+= charPosition == -1 ? string[i] : translationTable[1][charPosition];
  }

  return output;
}

然后在 winnow_results() 函数的适当位置使用它。 引用 chosen.jquery.js 行：

第 315 行

searchText = this.get_search_text();
// replace with
searchText = this.strip_diacritics(this.get_search_text());

第 339 行

option.search_match = this.search_string_match(option.search_text, regex);
// replace with
option.search_match = this.search_string_match(this.strip_diacritics(option.search_text), regex);

最后是第 345 行

startpos = option.search_text.search(zregex);
// replace with
startpos = this.strip_diacritics(option.search_text).search(zregex);

你就完成了:-)。

（我想写一些“保存游戏字节替换”指令以在旧 DOS 游戏中获得额外生命）

Whole modified file at pastebin.

2016 年 9 月 29 日：在 Chosen 1.6.2 中进行的修改，测试正常。

Answer 2

Chosen 看起来并没有默认执行此操作 - 代码中没有此功能。

源代码是here。我已经在下面发布了搜索功能，它负责检查字符。此函数中没有任何内容可以处理这样的亲密角色，因此您要么必须编写它，要么向 Chosen 团队请求该功能。这是因为，从本质上讲，重音字符和非重音字符没有相同的 ASCII（或 Unicode）值。您必须有某种类型的查找表，并为每个字符解析它以返回“模糊”结果。

很抱歉，我无法提供更多帮助。我敢肯定，如果你能找到一种方法来修改这个函数，你就可以让它工作。同样，您需要查找表或基础代码值的东西。祝你好运。

编辑：您可能不需要查找表 - 也许正则表达式功能具有执行此操作的内置方法。或者，您可以简单地匹配与您要搜索的字母相近的任何内容。

Chosen.prototype.winnow_results = function() {
      var found, option, part, parts, regex, regexAnchor, result, result_id, results, searchText, startpos, text, zregex, _i, _j, _len, _len1, _ref;
      this.no_results_clear();
      results = 0;
      searchText = this.search_field.val() === this.default_text ? "" : $('<div/>').text($.trim(this.search_field.val())).html();
      regexAnchor = this.search_contains ? "" : "^";
      regex = new RegExp(regexAnchor + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
      zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
      _ref = this.results_data;
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        option = _ref[_i];
        if (!option.disabled && !option.empty) {
          if (option.group) {
            $('#' + option.dom_id).css('display', 'none');
          } else if (!(this.is_multiple && option.selected)) {
            found = false;
            result_id = option.dom_id;
            result = $("#" + result_id);
            if (regex.test(option.html)) {
              found = true;
              results += 1;
            } else if (this.enable_split_word_search && (option.html.indexOf(" ") >= 0 || option.html.indexOf("[") === 0)) {
              parts = option.html.replace(/\[|\]/g, "").split(" ");
              if (parts.length) {
                for (_j = 0, _len1 = parts.length; _j < _len1; _j++) {
                  part = parts[_j];
                  if (regex.test(part)) {
                    found = true;
                    results += 1;
                  }
                }
              }
            }
            if (found) {
              if (searchText.length) {
                startpos = option.html.search(zregex);
                text = option.html.substr(0, startpos + searchText.length) + '</em>' + option.html.substr(startpos + searchText.length);
                text = text.substr(0, startpos) + '<em>' + text.substr(startpos);
              } else {
                text = option.html;
              }
              result.html(text);
              this.result_activate(result);
              if (option.group_array_index != null) {
                $("#" + this.results_data[option.group_array_index].dom_id).css('display', 'list-item');
              }
            } else {
              if (this.result_highlight && result_id === this.result_highlight.attr('id')) {
                this.result_clear_highlight();
              }
              this.result_deactivate(result);
            }
          }
        }
      }
      if (results < 1 && searchText.length) {
        return this.no_results(searchText);
      } else {
        return this.winnow_results_set_highlight();
      }
    };