Question

无论如何，选择查看的不仅仅是搜索功能的选项文本吗？

例如：

<select>
    <option data-keywords="circle,ball,sphere">Circle</option>
    <option data-keywords="rectangle,square">Rectangle</option>
</select>

它不必对关键字进行匹配下划线，如果它与默认情况下的文本匹配，它只会使结果匹配下划线。

如果它不是原生的，我将如何在javascript中添加它，如果它之前还没有完成。

Answer 1

如下所述，可以采用相当实用的快速解决方案。

请注意

此解决方案需要/假设：

选择版本1.1.0
每个data-keywords代码的option属性
在data-keywords属性

好的，让我们来看看。

打开你的jquery.chosen.js文件。

（您将无法使用缩小版本。）

<强> 1。确保在本地选项中存储数据属性

位置 =＆gt; add_option（）

完整定义

SelectParser.prototype.add_option = function（option，group_position，group_disabled）{}

修改

查找this.parsed.push()，在定义的底部，在style下方，添加以下代码：

keywords: ($(option).data().keywords!==undefined ? $(option).data().keywords.split(',') : false)

<强> 2。确保搜索功能

解析关键字

位置 =＆gt; winnow_results（）

完整定义

AbstractChosen.prototype.winnow_results = function() {}

修改

2.1 在顶级声明中添加新变量keywordMatch：

var escapedSearchText，option，regex，regexAnchor，results，results_group，searchText，startpos，text，zregex，_i，_len，_ref;

变为：

var escapedSearchText，option，regex，regexAnchor，results，results_group，searchText，startpos，text，zregex，_i，_len，_ref， keywordMatch ;

2.2 找到这个条件：if (!(option.group && !this.group_search)){}并在第二行（设置option.search_match之后）之后，添加以下代码：

keywordMatch=(option.keywords && option.keywords.indexOf(searchText) > -1); if(keywordMatch) option.search_match=true;

2.3 找到这个作业：

option.search_text = text.substr(0, startpos) + '<em>' + text.substr(startpos);

并用以下代码替换它：

option.search_text = keywordMatch ? text : (text.substr(0, startpos) + '<em>' + text.substr(startpos));

这些修改以快速实现的形式出现。如果您需要更多选项（例如关键字不区分大小写），您需要自己实现这些部分。

如果有问题或者我忘了什么，请告诉我。

Answer 2

感谢SquareCat提供的出色解决方案！我希望能够使用多个关键字（包括部分关键字）进行搜索，因此我开发了一些可以完成工作的原始代码。

添加到SquareCats解决方案：

而不是使用：

keywordMatch=(option.keywords && option.keywords.indexOf(searchText) > -1);

请改用：

keywordMatch=this.keyword_string_match(option.keywords,searchText);

并添加此功能：

AbstractChosen.prototype.keyword_string_match = function(keyword_array, searchtextstring) {
  var value, searchlength, searchterm;
  var continuetonext = "";
  var searchstring = searchtextstring; 
  var wordmatchcounter = 0;
  if (searchstring !== ""){
    searchstring = searchstring.split(' ');
      for (searchterm = 0 ; searchterm < searchstring.length; searchterm++ ){
        if (continuetonext == "" || continuetonext == true){
          continuetonext = false;
          searchtext = searchstring[searchterm];
          for (var i = 0; i < keyword_array.length; ++i) {
              value = keyword_array[i];
              searchlength = searchtext.length;
              if (value.substring(0, searchlength) === searchtext) {
               continuetonext = true;
               wordmatchcounter++;     
              }else{
                continuetonext = false;
              };
          };
       };
      };
    if (wordmatchcounter == searchterm){return true}else{return false};
  }else{return false};
};

Answer 3

我相信这样的事情会起作用：

<强>的JavaScript

document.getElementById('filter-input').onkeyup = function () {
  filter(this.value, document.getElementById('select-input'));
};

function filter(value, input) {
  var children = input.children,
      found = false,
      keywords;
  children = Array.prototype.slice.call(children);
  children.forEach(function (c) {
    c.removeAttribute('selected');
  });
  children.forEach(function (c) {
    keywords = c.getAttribute('data-keywords').split(',');
    keywords.forEach(function (k) {
      if (k === value) {
        found = true;
        c.setAttribute('selected', true);
        return;
      }
    });
    if (found) return;
  });
}

DEMO

按关键字选择JS搜索

3 个答案: