Question

我正试图允许用户搜索我的下拉框之一。

对于下拉菜单中的每个选项，我都希望包含标题和一些元关键字作为搜索依据。

这是我的代码：

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

除此之外，我对尝试的方法完全不知所措，而且我很难通过谷歌搜索找到与此相关的任何东西。

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

Answer 1

我能够通过覆盖select2中的matcher函数来解决此问题。

此代码将允许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;            
    }
});

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

1 个答案: