按关键字选择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
• data-keywords每个option标签的属性
• 由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.1keywordMatch在top声明中添加一个新变量:

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));

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

如果有问题或者我忘了什么,请告诉我.