jQuery 搜索插件 (jSearch) 搜索多个区域

Question

嘿，我正在使用名为 jSearch 的 jQuery 插件，我有以下代码，目前允许我在所述类名中搜索一些标签：

var jSearch = (function () {
   var input = $('#searchTxtBox');
   var items = $('#inventory .select3-multiple-selected-item');

   input.keyup(function () {
       var input = $(this).val();

       switch (true) {
           case input === '':
              items.css('opacity', '1');
              break;
           default:
              items.css('opacity', '0.2');
              items.filter('[data-searchBox*="' + input.toLowerCase() + '"]').css('opacity', '1');
              break;
       }
   });
}());

还有一些 HTML：

<div class="cssMadeTbl-cell">
    <label class="control-label" data-base="NEW_Project" data-definedas="text" data-required="True" for="inventory"></label>
    <div style="float: right;">
        <input class="tips" data-tooltip="example 1" id="searchTxtBox" name="searchTxtBox" placeholder="Search..." type="search" value=" ">
    </div>
    <div class="input-group">
        <span data-db="bomStatus" class="bomClass" data-id="The Status">The Status</span>
        <span id="lblBG"></span>
        <div class="input-group-addon" style="width: 33px;">
            <img src="data:image/svg+xml;base64,+DQo8L2c+DQo8L2c+DQo8L2c+Qo8L2c+DQo8L2c+DQo8L3N2Zz4NCg==" id="iconImg_currentUsers" style="width: 20px; height:20px;">
        </div>
        <div class="col-sm-10">
            <span id="inventory" class="tips form-control input-sm" data_tooltip="example 1" data-cnt="0">
                <div class="select3-multiple-input-container">
                    <span class="select3-multiple-selected-item" data-item-id="1" data-searchbox="pending">Pending</span>
                    <span class="select3-multiple-selected-item" data-item-id="2" data-searchbox="approved">Approved</span>
                    <span class="select3-multiple-selected-item" data-item-id="3" data-searchbox="denied">Denied</span>
                    <span class="select3-multiple-selected-item" data-item-id="ADDtab_100954500" data-searchbox="add item">ADD ITEM</span>
                    <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="select3-multiple-input" placeholder="">
                    <span class="select3-multiple-input select3-width-detector"></span>
                    <div class="clearfix"></div>
                </div>
            </span>
        </div>
    </div>
</div>

这适用于上述区域。但问题是，在同一页面上，我还有更多 InventoryXX id，我也需要添加搜索框。这些范围从 Inventory 到 Inventory18。

我知道我可以这样做：

var jSearch1 = (function () {
var input = $('#searchTxtBox');
var items = $('#inventory .select3-multiple-selected-item');
[more code here....]

var jSearch2 = (function () {
var input = $('#searchTxtBox');
var items = $('#inventory1 .select3-multiple-selected-item');
[more code here....]

var jSearch3 = (function () {
var input = $('#searchTxtBox');
var items = $('#inventory2 .select3-multiple-selected-item');
[more code here....]
[etc etc...]

但这看起来真的很乱......

如何修改此 jQuery 脚本以容纳所有这些 Inventory id，但仍然彼此分开？

Answer 1

尽量省略#inventory:

var items = $('.select3-multiple-selected-item');

如果您只需要定位#inventory*，也可以这样修改选择器：

var items = $('[id^="inventory"] .select3-multiple-selected-item');