jQuery Chosen:如何搜索选项的标题

时间:2016-06-29 07:09:03

标签: javascript jquery drop-down-menu jquery-chosen

我正在使用一个选择框与jQuery选择的插件结合使用。我给每个选项一个值(4位数代码)和一个标题(代码描述)。

当我在搜索框中输入内容时,我希望插件也能在标题中搜索。目前它只适用于选项的内部文本。

之前有人这样做过,或者有人知道怎么做吗?

谢谢:)

1 个答案:

答案 0 :(得分:0)

我遇到了你面临的确切问题,并设法通过操纵Chosen插件js库来解决它。

基本上,您需要使用option.html查找这些行,因为搜索过滤器正在使用 option.html

我们现在希望它也可以使用选项的title属性进行过滤,而不是仅使用option.html,这是 option.title 在这种情况下。

使用 AbstractChosen.prototype.winnow_results = function(){搜索该行。

这是函数中的原始代码

      option.search_text = option.group ? option.label : option.html;
      if (!(option.group && !this.group_search)) {
        option.search_match = this.search_string_match(option.search_text, regex);
        if (option.search_match && !option.group) {
          results += 1;
        }
        if (option.search_match) {
          if (searchText.length) {
            startpos = option.search_text.search(zregex);
            text = option.search_text.substr(0, startpos + searchText.length) + '</em>' + option.search_text.substr(startpos + searchText.length);
            option.search_text = text.substr(0, startpos) + '<em>' + text.substr(startpos);
          }
          if (results_group != null) {
            results_group.group_match = true;
          }
        } else if ((option.group_array_index != null) && this.results_data[option.group_array_index].search_match) {
          option.search_match = true;
        }

让我们将其更改为:

      option.search_text = option.group ? option.label : option.html;
      if (!(option.group && !this.group_search)) {
        option.search_match = this.search_string_match(option.html, regex) || this.search_string_match_title(option.title, regex);
        option.search_match_title = this.search_string_match_title(option.title, regex);
        if (option.search_match && !option.group) {
          results += 1;
        }
        if (option.search_match) {
          if (searchText.length) {
            if (option.search_match_title) {
                startpos = option.title.search(zregex);
            }
            else {
                startpos = option.search_text.search(zregex);
                text = option.search_text.substr(0, startpos + searchText.length) + '</em>' + option.search_text.substr(startpos + searchText.length);
                option.search_text = text.substr(0, startpos) + '<em>' + text.substr(startpos);
            }
          }
          if (results_group != null) {
            results_group.group_match = true;
          }
        } else if ((option.group_array_index != null) && this.results_data[option.group_array_index].search_match) {
          option.search_match = true;
        } 

现在寻找下面的另一段代码:

AbstractChosen.prototype.search_string_match = function(search_string, regex) {
  var part, parts, _i, _len;
  if (regex.test(search_string)) {
    return true;
  } else if (this.enable_split_word_search && (search_string.indexOf(" ") >= 0 || search_string.indexOf("[") === 0)) {
    parts = search_string.replace(/\[|\]/g, "").split(" ");
    if (parts.length) {
      for (_i = 0, _len = parts.length; _i < _len; _i++) {
        part = parts[_i];
        if (regex.test(part)) {
          return true;
        }
      }
    }
  }
};

之后,您只需要在上面的函数下面插入以下代码:

AbstractChosen.prototype.search_string_match_title = function(search_string, regex) {
  var part, parts, _i, _len;
  if (regex.test(search_string)) {
    return true;
  } 
};

希望这有帮助。