代码之家 › 专栏 › 技术社区 › GrumpyCrouton

在“选择选项”中按元字符串搜索

jquery-select2 html jquery javascript

GrumpyCrouton · 技术社区 · 6 年前

我正在尝试允许用户搜索我的一个下拉框。

对于下拉列表中的每个选项,我想包括一个标题和一些元关键字来搜索。

这是我的代码:

<select id="part_selection" name="part_selection" multiple>
    <repeat group="{{ @parts }}" value="{{ @part }}">
        <option value="{{ @part['uid'] }}">{{ @part['title'] }}</option>
    </repeat>
</select>

我上面的代码没有包含选项的关键字,因为我无法让它工作。

我的第一个想法是添加一个 <span> 在选项文本内部,带有隐藏样式,因此不会显示,但可以搜索。

<option value="{{ @part['uid'] }}">{{ @part['title'] }} <span style="display: none;">{{ @part['attributes'] }}</span></option>

但这不起作用,因为选项标记不能包含其他标记。

于是我四处寻找解决方案,结果发现 this rather cryptic answer ,简单地说是“使用Select2”。我的服务器上已经安装了Select2,但我不知道它有这个功能,所以我用Select2初始化了select元素。

$('#part_selection').select2({dropdownParent: $('#part_selection').parent(), width: '100%'});

这就是说,我在文档中找不到任何迹象表明这可以搜索隐藏的选项文本,我自己似乎也找不出答案。

我试过的:

//Add data-meta tag to element, saw this somewhere...
<option value="{{ @part['uid'] }}" data-meta"{{ @part['attributes'] }}">{{ @part['title'] }}</option>

除此之外,我完全不知道该尝试什么,我很难通过谷歌搜索找到任何与此相关的东西。

如何在选择框中搜索隐藏的元/描述信息?

1 回复 | 直到 6 年前

GrumpyCrouton 6 年前

我可以通过覆盖 matcher 功能在select2中。

此代码将允许select2中的搜索框搜索 data-meta 任何选项的属性。

$(selector).select2({matcher: function(params, data) {
    if ($.trim(params.term) === '') {
        return data;
    }
    if (typeof data.text === 'undefined') {
        return null;
    }

    var search_term = params.term.toLowerCase();
    var text_value = data.text.toLowerCase();

    //in my case, the data-meta attribute is a json object.
    //if you just want to use text here, you could do:
    //var meta = $(data.element).data('meta').toLowerCase();
    var meta = JSON.stringify($(data.element).data("meta")).toLowerCase();

    if (text_value.indexOf(search_term) > -1 || meta.indexOf(search_term) > -1) {
        var modifiedData = $.extend({}, data, true);
        return modifiedData;
    }

    return null;            
    }
});

推荐文章

seme · 格式化JSON结果

3 年前

Sean · ng选项具有预选值时不绑定

7 年前

najmath · 如何访问django中select2的值

7 年前

sksallaj · 使用Google网站转换器插件选择2-超出最大调用堆栈大小

7 年前

Rajesh Samui · 如何使select2只读?

7 年前

user2849976 · 选择td旁边的下一个选择框,然后根据其文本值选择选项

7 年前

Rookie · 在控制台中选择2不选择且无错误

7 年前

peace_love · 如何仅在添加选项时触发,而不在删除时触发(多选2)?

7 年前

Zoe · 如何从yii2-widget-select2获取数据

7 年前

peace_love · 如何通过初始化select2来防止我的ajax函数在另一个选择框之后添加一个?

7 年前