javascript - 选择 JS 按关键字搜索

Question

有没有办法让选择的外观不仅仅是搜索功能的选项文本？

例如:

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

它不必对关键字进行匹配下划线，它只会在匹配文本时像默认情况下那样对结果进行下划线匹配。

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

Answer 1

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

请注意

此解决方案要求/假设:

• 选择的版本 1.1.0
• 每个option标签的data-keywords属性
• data-keywords 属性中以逗号分隔的关键字

好的，让我们开始吧。

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

(您将无法使用缩小版)。

---

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

Location => 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。确保关键字被搜索功能解析

Location => 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)){} 和第二行之后(where 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));

---

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

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