Javascript 按关键字选择JS搜索

是否有任何方法可以让所选内容不仅仅是搜索功能的选项文本

例如：

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

它不必在关键字上做匹配下划线，它只会在匹配文本时做匹配下划线，就像默认情况下一样

---

如果它不是本机的，如果以前没有这样做过，我将如何在javascript中添加它。

我相信类似的方法会奏效：

JavaScript

---

我相信这样做会奏效：

JavaScript

---

一个相当实际、快速的解决方案可以应用如下

请注意

此解决方案需要/假设：

所选版本1.1.0 每个选项标记的数据关键字属性 “数据关键字”属性中用逗号分隔的关键字 好的，让我们开始吧

打开jquery.selected.js文件

您将无法使用缩小版

一,。确保在本地选项中存储数据属性

位置=>add_选项

完整定义

选择parser.prototype.add_option=functionoption，group_位置，group_禁用{}

编辑

查找this.parsed.push，在定义的底部，样式的正下方，添加以下代码：

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

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

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

二,。确保搜索功能已解析关键字

位置=>winnow_结果

完整定义

编辑

2.1将新变量关键字匹配添加到top声明：

var escapedSearchText，option，regex，regexAnchor，results，results_组，searchText，startpos，text，zregex，_i，_len，_ref

变成：

var escapedSearchText、option、regex、regexAnchor、结果、结果组、searchText、startpos、text、zregex、_i、_len、_ref、关键字匹配

2.2发现这种情况：如果！option.group&！此.group_search{}，在设置option.search_match的第二行之后，添加以下代码：

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

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

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

2.3查找此任务：

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

并将其替换为以下代码：

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

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

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

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

---

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

一个相当实际、快速的解决方案可以应用如下

请注意

此解决方案需要/假设：

所选版本1.1.0 每个选项标记的数据关键字属性 “数据关键字”属性中用逗号分隔的关键字 好的，让我们开始吧

打开jquery.selected.js文件

您将无法使用缩小版

一,。确保在本地选项中存储数据属性

位置=>add_选项

完整定义

选择parser.prototype.add_option=functionoption，group_位置，group_禁用{}

编辑

查找this.parsed.push，在定义的底部，样式的正下方，添加以下代码：

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

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

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

二,。确保搜索功能已解析关键字

位置=>winnow_结果

完整定义

编辑

2.1将新变量关键字匹配添加到top声明：

var escapedSearchText，option，regex，regexAnchor，results，results_组，searchText，startpos，text，zregex，_i，_len，_ref

变成：

var escapedSearchText、option、regex、regexAnchor、结果、结果组、searchText、startpos、text、zregex、_i、_len、_ref、关键字匹配

2.2发现这种情况：如果！option.group&！此.group_search{}，在设置option.search_match的第二行之后，添加以下代码：

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

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

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

2.3查找此任务：

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

并将其替换为以下代码：

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

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

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

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

---

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

谢谢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};
};

---

感谢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};
};

---

这是经过深思熟虑的。他们已经不支持它了吗？嗯，如果我输入k，当关键字为kjoc时，它不匹配。。。它只能在完全匹配的情况下工作，这是正确的。但是，您可以轻松实现所需的行为。勾选2.2，在这里我们使用indexOf。在给定的示例中，我们通过在option.keywords中查找完整的匹配项来比较字符串。如果您想允许更灵活的过滤机制，可以映射

---

option.keywords每个条目上的比较函数。至于缺乏支持——我想这从来不是他们项目的要求。这是经过深思熟虑的。他们已经不支持它了吗？嗯，如果我输入k，当关键字为kjoc时，它不匹配。。。它只能在完全匹配的情况下工作，这是正确的。但是，您可以轻松实现所需的行为。勾选2.2，在这里我们使用indexOf。在给定的示例中，我们通过在option.keywords中查找完整的匹配项来比较字符串。如果希望允许更灵活的过滤机制，可以在option.keywords的每个条目上映射比较函数。至于缺乏支持，我想这从来不是他们项目的要求。